import { css } from "@/styled-system/css";
import { ComponentChild, ComponentProps } from "preact";

type ButtonProps = ComponentProps<"button"> & {
  children: ComponentChild;
  onClick?: (event: MouseEvent) => void;
  type?: "button" | "submit" | "reset";
}

export default function Button({ children, type, onClick, ...props }: ButtonProps) {
  return (
    <button
      className={css({
        backgroundColor: "blue.100",
        color: "blue.800",
        border: "1px solid",
        borderColor: "blue.800",
        cursor: "pointer",
        transition: "all 0.2s",
        boxShadow: "0 0 0 1px rgba(0, 0, 0, 0.05)",
        p: 4,
        rounded: "lg",
        _hover: {
          backgroundColor: "blue.200",
          borderColor: "blue.200",
          boxShadow: "0 0 0 1px rgba(0, 0, 0, 0.1)",
        },
        _active: {
          backgroundColor: "blue.300",
        },
        _focus: {
          boxShadow: "0 0 0 1px rgba(0, 0, 0, 0.1), 0 0 0 3px rgba(0, 0, 255, 0.2)",
          outline: "none",
          inset: "0 0 0 3px rgba(0, 0, 255, 0.2)",
        }
      })}
      type={type ?? "button"}
      onClick={onClick}
      {...props}
    >
      {children}
    </button>
  );
}