"use client";
import clsx from "clsx";
import { daysAgo, today } from "@/lib/format";
import { Field } from "./ui";

interface Props {
  start: string;
  end: string;
  onChange: (start: string, end: string) => void;
  presets?: number[]; // days
  className?: string;
}

export function DateRange({ start, end, onChange, presets = [7, 30, 90, 120, 365], className }: Props) {
  return (
    <div className={clsx("flex flex-wrap items-end gap-2", className)}>
      <Field label="Start" className="w-[10.5rem]">
        <input type="date" className="input" value={start} max={end || undefined} onChange={(e) => onChange(e.target.value, end)} />
      </Field>
      <Field label="End" className="w-[10.5rem]">
        <input type="date" className="input" value={end} min={start || undefined} onChange={(e) => onChange(start, e.target.value)} />
      </Field>
      <div className="flex flex-wrap gap-1">
        {presets.map((d) => {
          const active = start === daysAgo(d) && end === today();
          return (
            <button key={d} type="button" className={clsx("btn btn-sm", active && "border-accent bg-accent-soft text-accent-ink")} onClick={() => onChange(daysAgo(d), today())}>
              {d} d
            </button>
          );
        })}
      </div>
    </div>
  );
}