import { ReactNode } from "react"

export type ButtonProps = { children?: ReactNode, border?: boolean, invertColors?: boolean, href?: string, onClick?: React.MouseEventHandler<HTMLAnchorElement>, className?: string }

export default function Button({ children, border, invertColors, href, onClick, className }: ButtonProps) {
  return <a
    onClick={onClick}
    className={`
      rounded-full
      border
      border-solid
      transition-colors
      flex
      items-center
      justify-center
      text-xl
      sm:text-2xl
      h-10
      sm:h-12 
      px-4
      sm:px-5
      sm:min-w-44
      hover:cursor-pointer
      ${border ? "border-black/[.08] dark:border-white/[.145]" : "border-transparent"}
      ${invertColors ? "bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc]": "hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent"}
      ${className || ""}
    `}
    href={href}
    target="_blank"
    rel="noopener noreferrer"
  >
    { children }
  </a>
}