'use client'
// src/components/ui/Button.tsx
// Input: variant, size, loading, icon, onClick, disabled
// Output: styled button with hover animation, glow on primary
// Rationale: single button primitive used across all screens

import { Loader2 } from 'lucide-react'
import { cn } from '@/lib/utils'

export type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'danger'
export type ButtonSize = 'sm' | 'md'

export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: ButtonVariant
  size?: ButtonSize
  loading?: boolean
  iconLeft?: React.ReactNode
  iconRight?: React.ReactNode
}

const variantClasses: Record<ButtonVariant, string> = {
  primary: `
    bg-accent text-bg-base border border-transparent font-medium
    hover:bg-accent-hover hover:shadow-glow-accent
    active:scale-[0.97]
    disabled:bg-text-disabled disabled:text-text-muted disabled:cursor-not-allowed disabled:shadow-none
  `,
  secondary: `
    bg-bg-elevated text-text-secondary border border-bg-border
    hover:bg-bg-subtle hover:text-text-primary hover:border-accent-border
    active:scale-[0.97]
    disabled:opacity-40 disabled:cursor-not-allowed
  `,
  ghost: `
    bg-transparent text-text-secondary border border-transparent
    hover:bg-bg-subtle hover:text-text-primary
    active:scale-[0.97]
    disabled:opacity-40 disabled:cursor-not-allowed
  `,
  danger: `
    bg-bg-elevated text-status-danger border border-bg-border
    hover:bg-bg-subtle hover:border-status-danger/40
    active:scale-[0.97]
    disabled:opacity-40 disabled:cursor-not-allowed
  `,
}

const sizeClasses: Record<ButtonSize, string> = {
  sm: 'h-7 px-3 text-caption gap-1.5 rounded-md',
  md: 'h-[34px] px-4 text-body gap-2 rounded-md',
}

export function Button({
  variant = 'secondary',
  size = 'md',
  loading = false,
  iconLeft,
  iconRight,
  children,
  className,
  disabled,
  ...props
}: ButtonProps) {
  return (
    <button
      className={cn(
        'inline-flex items-center justify-center font-sans select-none',
        'transition-all duration-fast',
        variantClasses[variant],
        sizeClasses[size],
        className
      )}
      disabled={disabled || loading}
      {...props}
    >
      {loading ? (
        <Loader2 size={14} strokeWidth={1.5} className="animate-spin flex-shrink-0" />
      ) : iconLeft ? (
        <span className="flex-shrink-0">{iconLeft}</span>
      ) : null}
      {children && <span>{children}</span>}
      {iconRight && !loading && (
        <span className="flex-shrink-0">{iconRight}</span>
      )}
    </button>
  )
}