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-blue-400 hover:bg-blue-500",
      secondary: "bg-red-400 hover:bg-red-500",
    },
  },
});

const Button: FunctionComponent<{ onClick: () => void }> = (props) => {
  return (
    <button type="button" class={button({ color: "primary" })} onClick={props.onClick}>
      {props.children}
    </button>
  );
};

export default Button;