'use client'

import { useState } from 'react'

export default function PDFCustomizer() {
  const [mode, setMode] = useState<'duplicate' | 'rewrite'>('duplicate')
  const [customizations, setCustomizations] = useState<string>('')

  const handleModeChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
    setMode(e.target.value as 'duplicate' | 'rewrite')
  }

  const handleCustomizationChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
    setCustomizations(e.target.value)
  }

  const handleSubmit = async () => {
    // We'll implement this later
    console.log('Submitting customizations:', { mode, customizations })
  }

  return (
    <div className="border p-4">
      <h2 className="text-xl font-bold mb-2">Customize PDF</h2>
      <select
        value={mode}
        onChange={handleModeChange}
        className="mb-2 p-2 border rounded"
      >
        <option value="duplicate">Duplicate</option>
        <option value="rewrite">Rewrite</option>
      </select>
      <textarea
        value={customizations}
        onChange={handleCustomizationChange}
        placeholder="Enter your customizations here..."
        className="w-full h-40 p-2 border rounded mb-2"
      />
      <button
        onClick={handleSubmit}
        className="bg-green-500 text-white px-4 py-2 rounded"
      >
        Apply Customizations
      </button>
    </div>
  )
}