import type { ArticleCategory } from '@/types/nostr'
import { t } from '@/lib/i18n'

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="">{t('article.editor.category.select')}</option>
        <option value="science-fiction">{t('article.editor.category.scienceFiction')}</option>
        <option value="scientific-research">{t('article.editor.category.scientificResearch')}</option>
      </select>
      {helpText && <p className="text-xs text-gray-500 mt-1">{helpText}</p>}
    </div>
  )
}