import { clsx } from 'clsx';
import Link from 'next/link';
import type { ButtonHTMLAttributes } from 'react';

type Variant = 'primary' | 'secondary' | 'ghost' | 'eco';

const variants: Record<Variant, string> = {
  primary:
    'bg-copper-500 text-graphite-950 hover:bg-copper-400 focus-visible:ring-copper-500',
  secondary:
    'bg-transparent border border-graphite-800/20 text-graphite-900 hover:border-graphite-800/50',
  ghost: 'bg-transparent text-graphite-900 hover:bg-graphite-800/5',
  eco: 'bg-leaf-500 text-graphite-950 hover:bg-leaf-400 focus-visible:ring-leaf-500'
};

const base =
  'inline-flex items-center justify-center gap-2 rounded-full px-6 py-3 text-sm font-semibold tracking-wide transition-all duration-200 hover:-translate-y-0.5 active:translate-y-0 active:scale-[0.97] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none';

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

export function Button({ variant = 'primary', className, href, children, ...props }: ButtonProps) {
  const classes = clsx(base, variants[variant], className);

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

  return (
    <button className={classes} {...props}>
      {children}
    </button>
  );
}