"use client";

import { ButtonHTMLAttributes, forwardRef } from "react";
import { COLOR_MAP, type PopColor } from "./theme";

type Size = "sm" | "md" | "lg";

interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
  color?: PopColor;
  size?: Size;
  icon?: React.ReactNode;
}

const SIZE_CLASSES: Record<Size, string> = {
  sm: "min-w-[96px] min-h-[40px] text-sm px-3",
  md: "min-w-[144px] min-h-[48px] text-base px-4",
  lg: "min-w-[200px] min-h-[56px] text-lg px-6",
};

const COMMON =
  "rounded-xl font-semibold text-white shadow-md transition-all duration-150 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2";

const PopButton = forwardRef<HTMLButtonElement, Props>(
  ({ color = "blue", size = "md", icon, children, className, ...rest }, ref) => {
    const tokens = COLOR_MAP[color];
    const classes = [
      COMMON,
      SIZE_CLASSES[size],
      tokens.buttonBg,
      tokens.buttonBgHover,
      tokens.ring,
      className,
    ]
      .filter(Boolean)
      .join(" ");

    return (
      <button ref={ref} className={classes} {...rest}>
        {icon && <span className="shrink-0">{icon}</span>}
        {children}
      </button>
    );
  }
);

PopButton.displayName = "PopButton";

export default PopButton;
