"use client";

import type { ReactNode } from "react";

import Box from "@mui/material/Box";
import Tooltip, { type TooltipProps } from "@mui/material/Tooltip";

export type DataTableCellTooltipProps = Omit<TooltipProps, "title" | "children"> & {
  title?: ReactNode;
  children: ReactNode;
  /** When true, truncates content with ellipsis inside the tooltip trigger. */
  truncate?: boolean;
};

export function DataTableCellTooltip({
  title,
  children,
  truncate = false,
  arrow = true,
  placement = "top",
  ...props
}: DataTableCellTooltipProps) {
  if (!title) {
    return <>{children}</>;
  }

  return (
    <Tooltip title={title} arrow={arrow} placement={placement} {...props}>
      <Box
        component="span"
        sx={{
          display: "inline-flex",
          alignItems: "center",
          minWidth: 0,
          maxWidth: "100%",
          width: truncate ? "100%" : "auto",
          overflow: truncate ? "hidden" : "visible",
          textOverflow: truncate ? "ellipsis" : "clip",
          whiteSpace: truncate ? "nowrap" : "normal",
          verticalAlign: "middle",
        }}
      >
        {children}
      </Box>
    </Tooltip>
  );
}