'use client'

interface FormFieldProps {
  label: string
  value: string | number | boolean
  onChange: (v: string | number | boolean) => void
  type?: 'text' | 'number' | 'date' | 'url' | 'checkbox' | 'select' | 'color'
  placeholder?: string
  options?: { value: string; label: string }[]
  hint?: string
}

export default function FormField({
  label, value, onChange, type = 'text', placeholder, options, hint,
}: FormFieldProps) {
  const inputClass = 'w-full bg-black/30 border border-white/10 rounded-lg px-3 py-2 text-sm text-white focus:outline-none focus:ring-2 focus:ring-indigo-500/40 placeholder:text-white/20'

  return (
    <div>
      <label className="block text-xs font-medium text-white/60 uppercase tracking-wider mb-2">{label}</label>

      {type === 'checkbox' ? (
        <label className="flex items-center gap-2 cursor-pointer">
          <input
            type="checkbox"
            checked={!!value}
            onChange={e => onChange(e.target.checked)}
            className="w-4 h-4 rounded border-white/20 bg-black/30 text-indigo-500 focus:ring-indigo-500/40"
          />
          <span className="text-sm text-white/70">{placeholder || label}</span>
        </label>
      ) : type === 'select' && options ? (
        <select
          value={String(value)}
          onChange={e => onChange(e.target.value)}
          className={inputClass}
        >
          {options.map(o => <option key={o.value} value={o.value}>{o.label}</option>)}
        </select>
      ) : type === 'color' ? (
        <div className="flex items-center gap-2">
          <input
            type="color"
            value={String(value) || '#6366f1'}
            onChange={e => onChange(e.target.value)}
            className="w-10 h-10 rounded-lg border border-white/10 cursor-pointer bg-transparent"
          />
          <input
            type="text"
            value={String(value)}
            onChange={e => onChange(e.target.value)}
            className={`${inputClass} flex-1`}
            placeholder="#6366f1"
          />
        </div>
      ) : (
        <input
          type={type}
          value={value as string | number}
          onChange={e => onChange(type === 'number' ? Number(e.target.value) || 0 : e.target.value)}
          placeholder={placeholder}
          className={inputClass}
        />
      )}

      {hint && <p className="text-[10px] text-white/30 mt-1">{hint}</p>}
    </div>
  )
}
