story-research-zapwall/components/ArticleField.tsx

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
}

function NumberOrTextInput({
  id,
  type,
  value,
  placeholder,
  required,
  min,
  onChange,
  className,
}: {
  id: string
  type: 'text' | 'number'
  value: string | number
  placeholder?: string
  required: boolean
  min?: number
  className: string
  onChange: (value: string | number) => void
}) {
  return (
    <input
      id={id}
      type={type}
      value={value}
      onChange={(e) => onChange(type === 'number' ? Number(e.target.value) || 0 : e.target.value)}
      className={className}
      placeholder={placeholder}
      min={min}
      required={required}
    />
  )
}

function TextAreaInput({
  id,
  value,
  placeholder,
  required,
  rows,
  className,
  onChange,
}: {
  id: string
  value: string | number
  placeholder?: string
  required: boolean
  rows?: number
  className: string
  onChange: (value: string | number) => void
}) {
  return (
    <textarea
      id={id}
      value={value}
      onChange={(e) => onChange(e.target.value)}
      className={className}
      rows={rows}
      placeholder={placeholder}
      required={required}
    />
  )
}

export function ArticleField(props: ArticleFieldProps) {
  const { id, label, value, onChange, required = false, type = 'text', rows, placeholder, helpText, min } =
    props
  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'

  const input =
    type === 'textarea' ? (
      <TextAreaInput
        id={id}
        value={value}
        placeholder={placeholder}
        required={required}
        rows={rows}
        className={inputClass}
        onChange={onChange}
      />
    ) : (
      <NumberOrTextInput
        id={id}
        type={type}
        value={value}
        placeholder={placeholder}
        required={required}
        min={min}
        className={inputClass}
        onChange={onChange}
      />
    )

  return (
    <div>
      <label htmlFor={id} className="block text-sm font-medium text-gray-700 mb-1">
        {label} {required && '*'}
      </label>
      {input}
      {helpText && <p className="text-xs text-gray-500 mt-1">{helpText}</p>}
    </div>
  )
}