import Link from 'next/link';
import { ArrowRight } from 'lucide-react';
import { cn } from '@/lib/cn';

type Variant = 'light' | 'dark' | 'outline' | 'outline-dark';
type Size = 'sm' | 'md';

const base =
  'group inline-flex items-center justify-center gap-2 rounded-full font-semibold whitespace-nowrap transition-[background-color,color,box-shadow,transform] duration-200 active:scale-[0.98] disabled:pointer-events-none disabled:opacity-40';

const variants: Record<Variant, string> = {
  // White pill — primary action on dark surfaces
  light: 'bg-white text-ink hover:bg-white/90 shadow-[0_1px_0_rgba(255,255,255,0.4)_inset]',
  // Ink pill — primary action on light surfaces
  dark: 'bg-ink text-white hover:bg-night-700',
  // Hairline pill — secondary action on light surfaces
  outline: 'border border-line-strong bg-white text-ink hover:border-ink/30',
  // Hairline pill — secondary action on dark surfaces
  'outline-dark': 'border border-white/20 text-white hover:bg-white/10',
};

const sizes: Record<Size, string> = {
  sm: 'h-9 px-4 text-[13px]',
  md: 'h-12 px-6 text-sm',
};

type CommonProps = {
  variant?: Variant;
  size?: Size;
  withArrow?: boolean;
  className?: string;
  children: React.ReactNode;
};

type ButtonProps = CommonProps &
  Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'className' | 'children'> & { href?: undefined };
type LinkProps = CommonProps & { href: string; onClick?: () => void };

export function Button(props: ButtonProps | LinkProps) {
  const { variant = 'dark', size = 'md', withArrow, className, children, ...rest } = props;
  const classes = cn(base, variants[variant], sizes[size], className);
  const content = (
    <>
      {children}
      {withArrow && (
        <ArrowRight
          aria-hidden
          className="size-4 transition-transform duration-200 group-hover:translate-x-0.5"
        />
      )}
    </>
  );

  if (props.href !== undefined) {
    const { href, onClick } = rest as LinkProps;
    return (
      <Link href={href} onClick={onClick} className={classes}>
        {content}
      </Link>
    );
  }

  return (
    <button type="button" {...(rest as React.ButtonHTMLAttributes<HTMLButtonElement>)} className={classes}>
      {content}
    </button>
  );
}

/** Round ink button with an arrow — used as the card affordance. */
export function ArrowBadge({ className }: { className?: string }) {
  return (
    <span
      aria-hidden
      className={cn(
        'inline-flex size-9 shrink-0 items-center justify-center rounded-full bg-ink text-white transition-transform duration-300 group-hover:translate-x-0.5',
        className,
      )}
    >
      <ArrowRight className="size-4" />
    </span>
  );
}