"use client";
import { useDashboardTranslations } from "@/features/cdc-gpsf/dashboard/dashboard-translation-provider";

import Box from "@mui/material/Box";
import Typography from "@mui/material/Typography";
import { useTheme } from "@mui/material/styles";

import { useAppLanguage } from "@/components/providers/app-language-provider";
import { formatDate } from "@/lib/date-utils";
import { useCdcGpsfDashboardSummary } from "@/features/cdc-gpsf/dashboard/hook/use-cdc-gpsf-dashboard";

type DashboardLastUpdatedProps = {
  // Every dashboard writes this label in its own language.
  label?: string;
};

// When the dashboard on screen was published. The numbers come from the final
// dashboard CDC-GPSF made live, so its generate date is what "last updated"
// means here. A dash shows while nothing is published.
export function DashboardLastUpdated({
  label,
}: DashboardLastUpdatedProps) {
  const theme = useTheme();
  const { language } = useAppLanguage();
  const t = useDashboardTranslations();
  const { generatedAt } = useCdcGpsfDashboardSummary();

  return (
    <Typography sx={{ fontSize: 11, color: theme.palette.text.secondary }}>
      <Box component="span" sx={{ fontWeight: 700 }}>
        {label ?? t.lastUpdated}:
      </Box>{" "}
      {formatDate(generatedAt, language, "dd MMMM yyyy, HH:mm")}
    </Typography>
  );
}