'use client'

function getISOWeek(dateStr: string): number {
 const d = new Date(dateStr)
 const date = new Date(Date.UTC(d.getFullYear(), d.getMonth(), d.getDate()))
 const dayNum = date.getUTCDay() || 7
 date.setUTCDate(date.getUTCDate() + 4 - dayNum)
 const yearStart = new Date(Date.UTC(date.getUTCFullYear(), 0, 1))
 return Math.ceil((((date.getTime() - yearStart.getTime()) / 86400000) + 1) / 7)
}

interface Props {
 value: string
 onChange: (v: string) => void
 label?: string
 required?: boolean
 id?: string
}

export default function DatePickerKW({ value, onChange, label, required, id }: Props) {
 return (
 <div>
 {label && (
 <label htmlFor={id} className="block text-sm font-medium text-foreground mb-1.5">
 {label}
 {required && <span className="text-destructive"> *</span>}
 </label>
 )}
 <input
 id={id}
 type="date"
 value={value}
 onChange={(e) => onChange(e.target.value)}
 required={required}
 className="w-full h-11 px-3 rounded-lg border border-border bg-background text-sm focus:outline-none focus:ring-2 focus:ring-primary"
 />
 {value && (
 <p className="text-xs text-muted-foreground mt-1">KW {getISOWeek(value)}</p>
 )}
 </div>
 )
}