import type { ButtonHTMLAttributes, CSSProperties, PropsWithChildren } from "react";

type Variant = "primary" | "secondary" | "ghost";

interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: Variant;
}

const variantStyles: Record<Variant, string> = {
  primary: "background: var(--primary); color: white; border: 0;",
  secondary: "background: var(--marquee-bg); color: var(--foreground); border: 0;",
  ghost: "background: transparent; color: var(--foreground); border: 1px solid var(--muted);"
};

export function Button({
  children,
  variant = "primary",
  ...props
}: PropsWithChildren<ButtonProps>): JSX.Element {
  return (
    <button
      {...props}
      style={{
        padding: "0.65rem 1rem",
        borderRadius: 8,
        cursor: "pointer",
        ...(Object.fromEntries(
          variantStyles[variant]
            .split(";")
            .map((rule) => rule.trim())
            .filter(Boolean)
            .map((rule) => {
              const [key, value] = rule.split(":");
              return [key.trim().replace(/-([a-z])/g, (_, c) => c.toUpperCase()), value.trim()];
            })
        ) as CSSProperties)
      }}
    >
      {children}
    </button>
  );
}
