import { JSX } from "preact";
import { IS_BROWSER } from "$fresh/runtime.ts";

const colors = {
  licorice: {
    bg: "bg-licorice",
    border: "border-licorice-800",
    text: "text-white",
  },
  sky: {
    bg: "bg-sky",
    border: "border-sky-800",
    text: "text-white",
  },
  grape: {
    bg: "bg-grape",
    border: "border-grape-800",
    text: "text-white",
  },
  fire: {
    bg: "bg-grape",
    border: "border-grape-800",
    text: "text-white",
  },
};

export function Button(
  props: JSX.HTMLAttributes<HTMLButtonElement> & { color?: keyof typeof colors },
) {
  const color = props.color || 'sky';
  const classes = `
  px-2
  py-1
  rounded-xl
  border-2
  ${colors[color].bg}
  ${colors[color].border}
  ${colors[color].text}
  hover:bg-smoke-500
  transition-colors
  ${props.class || ""}`;
  return (
    <button
      {...props}
      disabled={(!IS_BROWSER && !props.href) || props.disabled}
      class={classes}
    />
  );
}