import { Dispatch, SetStateAction } from "react";

export function TanButton({
  label,
  onClick,
}: {
  label: string;
  onClick: Dispatch<SetStateAction<any>>;
}) {
  // General tan colored button
  return (
    <button
      type="button"
      className="inline-flex justify-center rounded-md border border-transparent bg-brandtan px-4 py-2 text-sm font-medium text-white hover:bg-hovertan focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2"
      onClick={onClick}
    >
      {label}
    </button>
  );
}

export function BrandButton({
  label,
  onClick,
  backgroundColor,
}: {
  label: string;
  onClick: Dispatch<SetStateAction<any>>;
  backgroundColor:
    | "brandblue"
    | "brandgold"
    | "brandmidblue"
    | "brandlightblue"
    | "brandbrown" ; // Restrict backgroundColor to these options
}) {
  // Dictionary to map background colors to hover colors
  const hoverColors = {
    brandblue: "hover:bg-hoverblue",
    brandgold: "hover:bg-hovergold",
    brandmidblue: "hover:bg-hoverblue",
    brandlightblue: "hover:bg-brandmidblue",
    brandbrown: "hover:bg-brandbrown",
  };

  return (
    <button
      type="button"
      className={`inline-flex justify-center rounded-md border border-transparent px-4 py-2 text-sm font-medium text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2
        bg-${backgroundColor} 
        ${hoverColors[backgroundColor]}`}
      onClick={onClick}
    >
      {label}
    </button>
  );
}
