src/components/Button.tsx

import { forwardRef } from 'react';
import { cn } from '@/lib/utils';

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

type Props = React.ButtonHTMLAttributes<HTMLButtonElement> & {
  variant?: Variant;
};

const variantClasses: Record<Variant, string> = {
  primary: 'bg-matcha text-cream hover:bg-matcha-deep active:bg-matcha-deep',
  secondary: 'bg-transparent text-ink border border-ink/80 hover:bg-ink/5',
  ghost: 'bg-transparent text-ink/60',
};

export const Button = forwardRef<HTMLButtonElement, Props>(function Button(
  { variant = 'primary', className, children, disabled, ...rest },
  ref,
) {
  return (
    <button
      ref={ref}
      disabled={disabled}
      className={cn(
        'flex w-full items-center justify-center gap-2 rounded-full px-6 py-[18px]',
        'text-[15px] font-medium font-sans transition-all duration-200',
        'disabled:opacity-40 disabled:cursor-not-allowed',
        variantClasses[variant],
        className,
      )}
      {...rest}
    >
      {children}
    </button>
  );
});