import { p as P } from 'web-components'

interface DateInputProps {
  value: Date | null
  setValue: (d: Date | null) => void
  showLabel?: boolean
  placeholder?: string
}

function toDateStr(d: Date | null): string {
  if (!d) return ''
  const y = d.getFullYear()
  const m = String(d.getMonth() + 1).padStart(2, '0')
  const day = String(d.getDate()).padStart(2, '0')
  return `${y}-${m}-${day}`
}

export default function DateInput({ value, setValue, showLabel = true, placeholder = 'Select Date' }: DateInputProps) {
  return (
    <div className="w-full">
      {showLabel ? <P className="text-xs mb-1">{placeholder}</P> : null}
      <input
        type="date"
        value={toDateStr(value)}
        onChange={(e) => setValue(e.target.value ? new Date(`${e.target.value}T00:00:00`) : null)}
        placeholder={placeholder}
        className="w-full rounded border border-gray-300 px-2 py-2 text-sm font-medium text-gray-800"
      />
    </div>
  )
}