"use client";

import type { HabitDayReport } from "@/features/habits/types";
import {
  formatHabitDayTooltip,
  getDayNumberLabel,
  getDayReportCellClass,
  getTodayIsoDate,
  getWeekdayShortLabel,
} from "@/features/habits/utils/habit-helpers";

type HabitWeekTrackerProps = {
  days: HabitDayReport[];
};

export function HabitWeekTracker({ days }: HabitWeekTrackerProps) {
  const today = getTodayIsoDate();

  if (days.length === 0) {
    return null;
  }

  return (
    <div className="mt-4" dir="ltr">
      <div className="grid grid-cols-7 gap-1 sm:gap-1.5">
        {days.map((day) => {
          const isToday = day.localDate === today;

          return (
            <div
              key={day.localDate}
              className="flex flex-col items-center gap-1.5"
            >
              <span className="text-[10px] font-medium uppercase tracking-wide text-muted-foreground sm:text-[11px]">
                {getWeekdayShortLabel(day.localDate)}
              </span>
              <div
                className={getDayReportCellClass(day.status, isToday)}
                title={formatHabitDayTooltip(day.localDate)}
              >
                {getDayNumberLabel(day.localDate)}
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}