import { forwardRef, HTMLProps } from "preact/compat";
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 extends HTMLProps<HTMLButtonElement> {
  color?: "primary" | "secondary" | "red";
  className?: string;
}

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

Button.displayName = "AHButton";

export default Button;