import { Check } from 'lucide-react'
import { cn } from '../../lib/utils'
import { useTheme } from '../../context/ThemeProvider'
import { THEME_ICONS, THEME_OPTIONS } from './constants'

export function AppearanceCard() {
  const { theme, setTheme } = useTheme()

  return (
    <div className="divide-y divide-border rounded-xl border border-border bg-surface">
      <div className="px-4 py-3">
        <p className="text-sm font-medium text-primary">Apariencia</p>
        <p className="text-xs text-foreground/50">Tema claro u oscuro</p>
      </div>
      {THEME_OPTIONS.map((option) => {
        const Icon = THEME_ICONS[option.value]
        const isSelected = theme === option.value
        return (
          <button
            key={option.value}
            type="button"
            onClick={() => setTheme(option.value)}
            className="flex w-full items-center gap-3 px-4 py-3 text-left transition-colors hover:bg-primary-soft"
          >
            <span className={cn('rounded-lg p-2', isSelected ? 'bg-accent-soft' : 'bg-primary-soft')}>
              <Icon
                className={cn('size-4', isSelected ? 'text-accent-fg' : 'text-foreground/70')}
              />
            </span>
            <div className="min-w-0 flex-1">
              <p className={cn('text-sm font-medium', isSelected ? 'text-accent-fg' : 'text-primary')}>
                {option.label}
              </p>
              <p className="text-xs text-foreground/50">{option.description}</p>
            </div>
            {isSelected ? <Check className="size-4 text-accent-fg" /> : null}
          </button>
        )
      })}
    </div>
  )
}