import React from "react";

import {
  TableCell as MuiTableCell,
  TableCellProps as MuiTableCellProps,
  Typography,
  TypographyProps,
} from "@mui/material";

export interface TableCellProps extends React.PropsWithChildren<MuiTableCellProps> {
  typographyProps?: TypographyProps;
}

export const TableCell: React.FC<TableCellProps> = ({ children, typographyProps, ...props }) => (
  <MuiTableCell {...props}>
    <Typography
      {...typographyProps}
      sx={{
        whiteSpace: "nowrap",
        fontVariationSettings: { sm: '"wdth" 100', xs: '"wdth" 75' },
        ...typographyProps?.sx,
      }}
      variant={typographyProps?.variant ?? "body2"}
    >
      {children}
    </Typography>
  </MuiTableCell>
);