'use client';

export interface DateRangeValue {
  /** ISO-Date YYYY-MM-DD oder undefined */
  after?: string;
  before?: string;
}

export function DateRangeInput({
  value,
  onChange,
  hint,
}: {
  value: DateRangeValue;
  onChange: (next: DateRangeValue) => void;
  hint?: string;
}) {
  return (
    <div className="space-y-0.5">
      <div className="flex items-center gap-1">
        <input
          type="date"
          value={value.after ?? ''}
          onChange={(e) => onChange({ ...value, after: e.target.value || undefined })}
          title="von"
          className="min-w-0 flex-1 rounded-md border border-zinc-200 bg-white px-2 py-1 text-xs focus:border-zinc-900 focus:outline-none dark:border-zinc-700 dark:bg-zinc-900"
        />
        <span className="text-[10px] text-zinc-400">–</span>
        <input
          type="date"
          value={value.before ?? ''}
          onChange={(e) => onChange({ ...value, before: e.target.value || undefined })}
          title="bis"
          className="min-w-0 flex-1 rounded-md border border-zinc-200 bg-white px-2 py-1 text-xs focus:border-zinc-900 focus:outline-none dark:border-zinc-700 dark:bg-zinc-900"
        />
      </div>
      {hint && <p className="text-[10px] text-zinc-400">{hint}</p>}
    </div>
  );
}
