'use client'

import { type ButtonHTMLAttributes } from 'react'
import { cn } from '@/lib/utils'

interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: 'primary' | 'secondary' | 'ghost' | 'danger'
  size?: 'sm' | 'md' | 'lg'
}

const variants = {
  primary:
    'shine-hover bg-gradient-to-b from-brand-400 via-brand-600 to-brand-800 text-white depth-raised hover:brightness-110 border border-brand-300/25 shadow-[0_0_24px_-14px_rgba(61,139,110,0.9)]',
  secondary:
    'shine-hover premium-chip text-[var(--premium-text)] hover:text-[var(--premium-text)]',
  ghost: 'text-[var(--premium-muted-text)] hover:bg-[var(--premium-hover-bg)] hover:text-[var(--premium-text)]',
  danger:
    'shine-hover bg-gradient-to-b from-red-500 to-red-800 text-white depth-raised hover:brightness-110 border border-red-300/25',
}

const sizes = {
  sm: 'px-3 py-1.5 text-sm',
  md: 'px-4 py-2 text-sm',
  lg: 'px-5 py-2.5 text-base',
}

export function Button({
  className,
  variant = 'primary',
  size = 'md',
  ...props
}: ButtonProps) {
  return (
    <button
      className={cn(
        'press-btn inline-flex items-center justify-center gap-2 rounded-xl font-semibold transition-colors disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:transform-none',
        variants[variant],
        sizes[size],
        className,
      )}
      {...props}
    />
  )
}