import styles from "./FilterButton.module.css";

interface FilterButtonProps {
  active: boolean;
  color: string;
  onClick: () => void;
  children: React.ReactNode;
}

export function FilterButton({
  active,
  color,
  onClick,
  children,
}: FilterButtonProps) {
  return (
    <button
      type="button"
      onClick={onClick}
      className={styles.btn}
      style={{
        borderColor: active ? color : "var(--bd)",
        background: active ? `${color}22` : "transparent",
        color: active ? color : "var(--tx-m)",
      }}
    >
      {children}
    </button>
  );
}