import { useTranslation } from "react-i18next";
import type { HistoryDay } from "@/types/diet.types";

interface HistoryChartProps {
  days: HistoryDay[];
}

export function HistoryChart({ days }: HistoryChartProps) {
  const { t } = useTranslation();
  const max = Math.max(...days.map((d) => d.calories), 1);

  if (days.every((d) => d.calories === 0 && d.mealCount === 0)) {
    return <p className="text-sm text-slate-400">{t("diet.noHistory")}</p>;
  }

  return (
    <div className="space-y-3">
      <p className="text-sm text-slate-500">{t("diet.historyMax", { max })}</p>
      <div className="flex h-40 items-end gap-1">
        {days.map((d) => {
          const pct = max > 0 ? (d.calories / max) * 100 : 0;
          return (
            <div key={d.date} className="flex min-w-0 flex-1 flex-col items-center gap-1">
              <div
                className="w-full rounded-t bg-brand-500 transition-all"
                style={{ height: `${Math.max(pct, d.calories > 0 ? 4 : 0)}%` }}
                title={`${d.date}: ${d.calories} kcal`}
              />
              <span className="truncate text-[10px] text-slate-400">{d.date.slice(5)}</span>
            </div>
          );
        })}
      </div>
    </div>
  );
}
