import type { SubmitEventHandler } from 'react'
import { useState } from 'react'

interface TodoFormProps {
  onSubmit: (title: string) => void
  isPending: boolean
}

export const TodoForm = ({ onSubmit, isPending }: TodoFormProps) => {
  const [title, setTitle] = useState('')

  const handleSubmit: SubmitEventHandler<HTMLFormElement> = (e) => {
    e.preventDefault()
    if (title.trim()) {
      onSubmit(title.trim())
      setTitle('')
    }
  }

  return (
    <form onSubmit={handleSubmit} className="relative group z-10">
      <div className="relative transform transition-all duration-200 focus-within:-translate-y-1">
        <input
          type="text"
          value={title}
          onChange={(e) => setTitle(e.target.value)}
          placeholder="添加新任务..."
          className="w-full pl-6 pr-32 py-5 bg-white rounded-2xl shadow-[0_8px_30px_rgb(0,0,0,0.04)] border-0 ring-1 ring-slate-100 focus:ring-2 focus:ring-indigo-500/50 outline-none transition-all placeholder:text-slate-400 text-lg text-slate-700"
          disabled={isPending}
        />
        <button
          type="submit"
          disabled={isPending || !title.trim()}
          className="absolute right-3 top-3 bottom-3 px-6 bg-indigo-600 hover:bg-indigo-700 text-white rounded-xl font-medium transition-all shadow-md shadow-indigo-200 disabled:opacity-50 disabled:shadow-none hover:shadow-lg hover:shadow-indigo-300 active:scale-95"
        >
          {isPending ? '添加中' : '添加'}
        </button>
      </div>
    </form>
  )
}