import { ArrowUpRight } from "lucide-react";

type Variant = "primary" | "ghost";

/** Tombol pill penuh (rounded-full) dengan glow halus — gaya Portfolite.
 *  Render <a> bila diberi href, atau <button> bila diberi onClick. */
export default function PillButton({
  href,
  onClick,
  children,
  variant = "primary",
  withIcon = true,
  className = "",
}: {
  href?: string;
  onClick?: () => void;
  children: React.ReactNode;
  variant?: Variant;
  withIcon?: boolean;
  className?: string;
}) {
  const base =
    "group inline-flex items-center justify-center gap-2 rounded-full px-6 py-3 text-sm font-medium transition-all duration-300";

  const styles: Record<Variant, string> = {
    primary:
      "bg-cta text-cta-ink hover:bg-cta/90 cta-glow",
    ghost:
      "glow-border bg-panel text-fg hover:bg-panel-strong",
  };

  const classes = `${base} ${styles[variant]} ${className}`;
  const icon = withIcon && (
    <ArrowUpRight
      size={16}
      className="transition-transform duration-300 group-hover:translate-x-0.5 group-hover:-translate-y-0.5"
    />
  );

  if (href) {
    return (
      <a href={href} className={classes}>
        {children}
        {icon}
      </a>
    );
  }

  return (
    <button type="button" onClick={onClick} className={classes}>
      {children}
      {icon}
    </button>
  );
}