import React from 'react'

interface ArticleFieldProps {
  id: string
  label: string
  value: string | number
  onChange: (value: string | number) => void
  required?: boolean
  type?: 'text' | 'textarea' | 'number'
  rows?: number
  placeholder?: string
  helpText?: string
  min?: number
}

export function ArticleField({
  id,
  label,
  value,
  onChange,
  required = false,
  type = 'text',
  rows,
  placeholder,
  helpText,
  min,
}: ArticleFieldProps) {
  const inputClass =
    'w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500'

  return (
    <div>
      <label htmlFor={id} className="block text-sm font-medium text-gray-700 mb-1">
        {label} {required && '*'}
      </label>
      {type === 'textarea' ? (
        <textarea
          id={id}
          value={value}
          onChange={(e) => onChange(e.target.value)}
          className={inputClass}
          rows={rows}
          placeholder={placeholder}
          required={required}
        />
      ) : (
        <input
          id={id}
          type={type}
          value={value}
          onChange={(e) =>
            onChange(type === 'number' ? parseInt(e.target.value) || 800 : e.target.value)
          }
          className={inputClass}
          placeholder={placeholder}
          min={min}
          required={required}
        />
      )}
      {helpText && <p className="text-xs text-gray-500 mt-1">{helpText}</p>}
    </div>
  )
}