import { FunctionComponent } from "preact";
import { tv } from "tailwind-variants";
import classes from "./Button.module.scss";
const button = tv({
  base: classes.button,
  variants: {
    color: {
      primary: "bg-[rgba(206,232,251,0.7)] hover:bg-[rgba(206,232,251,0.9)] active:bg-[rgba(206,232,251,0.9)]",
      secondary: "bg-[rgba(255,251,197,0.68)] hover:bg-[rgba(255,251,197,0.9)] active:bg-[rgba(255,251,197,0.9)]",
      red: "bg-[rgba(251,194,199,0.53)] hover:bg-[rgba(251,194,199,0.9)] active:bg-[rgba(251,194,199,0.9)]",
    },
  },
});

interface ButtonProps {
  color?: "primary" | "secondary" | "red";
  onClick?: () => void;
  className?: string;
}

const Button: FunctionComponent<ButtonProps> = ({
  children,
  onClick = () => {},
  color = "primary",
  className = "",
}) => {
  return (
    <button type="button" class={button({ color: color, class: className })} onClick={onClick}>
      {children}
    </button>
  );
};

export default Button;