"use client";

import Typography from "@mui/material/Typography";

import { useAppLanguage } from "@/components/providers/app-language-provider";
import { DataTableCellTooltip } from "@/components/ui/data-table/data-table-tooltip-cell";
import { formatDate } from "@/lib/date-utils";

export type DataTableDateCellProps = {
  value?: string | Date | null;
  align?: "left" | "center" | "right";
  showTooltip?: boolean;
};

export function DataTableDateCell({
  value,
  align = "center",
  showTooltip = true,
}: DataTableDateCellProps) {
  const { language } = useAppLanguage();
  const formattedDate = formatDate(value, language);

  const content = (
    <Typography
      noWrap
      sx={{
        width: "100%",
        color: "text.primary",
        fontSize: 13,
        fontWeight: 500,
        textAlign: align,
      }}
    >
      {formattedDate}
    </Typography>
  );

  if (!showTooltip || formattedDate === "-") {
    return content;
  }

  return (
    <DataTableCellTooltip title={formattedDate} truncate>
      {content}
    </DataTableCellTooltip>
  );
}