import React from 'react'
import type { ArticleCategory } from '@/types/nostr'

interface CategorySelectProps {
  id: string
  label: string
  value?: ArticleCategory | ''
  onChange: (value: ArticleCategory | undefined) => void
  required?: boolean
  helpText?: string
}

export function CategorySelect({
  id,
  label,
  value,
  onChange,
  required = false,
  helpText,
}: CategorySelectProps) {
  return (
    <div>
      <label htmlFor={id} className="block text-sm font-medium text-gray-700 mb-1">
        {label} {required && '*'}
      </label>
      <select
        id={id}
        value={value ?? ''}
        onChange={(e) => {
          const next = e.target.value === '' ? undefined : (e.target.value as ArticleCategory)
          onChange(next)
        }}
        className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
        required={required}
      >
        <option value="">Sélectionnez une catégorie</option>
        <option value="science-fiction">Science-fiction</option>
        <option value="scientific-research">Recherche scientifique</option>
      </select>
      {helpText && <p className="text-xs text-gray-500 mt-1">{helpText}</p>}
    </div>
  )
}