import { useTranslation } from "react-i18next";
import { ChevronLeft, ChevronRight } from "lucide-react";
import { addDaysIso, formatDisplayDate, todayIso } from "@/utils/date.util";

interface DateNavigatorProps {
  date: string;
  onChange: (date: string) => void;
}

export function DateNavigator({ date, onChange }: DateNavigatorProps) {
  const { t, i18n } = useTranslation();
  const isToday = date === todayIso();

  return (
    <div className="flex flex-wrap items-center gap-2">
      <button
        type="button"
        className="btn-secondary !px-2.5 !py-1.5"
        aria-label={t("common.previous")}
        onClick={() => onChange(addDaysIso(date, -1))}
      >
        <ChevronLeft className="h-4 w-4" />
      </button>
      <button type="button" className="btn-secondary !py-1.5 !text-sm" onClick={() => onChange(todayIso())}>
        {t("diet.goToday")}
      </button>
      <button
        type="button"
        className="btn-secondary !px-2.5 !py-1.5"
        aria-label={t("common.next")}
        onClick={() => onChange(addDaysIso(date, 1))}
      >
        <ChevronRight className="h-4 w-4" />
      </button>
      <span className="text-sm font-medium text-slate-600 dark:text-slate-300">
        {formatDisplayDate(date, i18n.language)}
        {!isToday ? ` (${t("diet.notToday")})` : null}
      </span>
    </div>
  );
}
