import { useForm } from 'react-hook-form'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'

interface Props {
  onSubmit: (data: Record<string, unknown>) => void
  loading?: boolean
}

export function BlockedDateForm({ onSubmit, loading }: Props) {
  const { register, handleSubmit } = useForm({
    defaultValues: { startDate: '', endDate: '', reason: '' },
  })

  function handleFormSubmit(data: { startDate: string; endDate: string; reason: string }) {
    onSubmit({
      startDate: data.startDate,
      endDate: data.endDate,
      reason: data.reason || undefined,
    })
  }

  return (
    <form onSubmit={handleSubmit(handleFormSubmit)} className="space-y-4">
      <div className="grid grid-cols-2 gap-4">
        <div className="space-y-2">
          <Label htmlFor="bd-start">Start Date *</Label>
          <Input id="bd-start" type="date" {...register('startDate')} required />
        </div>
        <div className="space-y-2">
          <Label htmlFor="bd-end">End Date *</Label>
          <Input id="bd-end" type="date" {...register('endDate')} required />
        </div>
      </div>
      <div className="space-y-2">
        <Label htmlFor="bd-reason">Reason</Label>
        <Input id="bd-reason" {...register('reason')} placeholder="e.g. Vacation, Conference" />
      </div>
      <Button type="submit" disabled={loading} className="w-full">
        {loading ? 'Saving...' : 'Add Blocked Date'}
      </Button>
    </form>
  )
}