import { BookOpen } from 'lucide-react'

export default function MetadataForm({ metadata, onChange }) {
  const { author, book, chapter, page } = metadata

  const field = (key) => (e) => onChange({ ...metadata, [key]: e.target.value })

  const inputClass =
    'w-full bg-white/5 border border-white/10 rounded-lg px-3 py-2 text-sm text-gray-200 ' +
    'placeholder-gray-600 focus:outline-none focus:border-purple-500/50 transition-colors'

  return (
    <div className="glass p-4 rounded-2xl space-y-3">
      <div className="flex items-center gap-2">
        <BookOpen className="w-4 h-4 text-purple-400" />
        <h3 className="text-sm font-medium text-gray-300">Job Metadata</h3>
      </div>

      <div className="grid grid-cols-2 gap-3">
        <div>
          <label className="text-xs text-gray-400 mb-1 block">Author</label>
          <input
            type="text"
            value={author}
            onChange={field('author')}
            placeholder="Author name"
            className={inputClass}
          />
        </div>
        <div>
          <label className="text-xs text-gray-400 mb-1 block">Book</label>
          <input
            type="text"
            value={book}
            onChange={field('book')}
            placeholder="Book title"
            className={inputClass}
          />
        </div>
        <div>
          <label className="text-xs text-gray-400 mb-1 block">Chapter</label>
          <input
            type="text"
            value={chapter}
            onChange={field('chapter')}
            placeholder="Chapter"
            className={inputClass}
          />
        </div>
        <div>
          <label className="text-xs text-gray-400 mb-1 block">Page</label>
          <input
            type="text"
            value={page}
            onChange={field('page')}
            placeholder="Page number"
            className={inputClass}
          />
        </div>
      </div>
    </div>
  )
}
