import React, { PropsWithChildren } from "react";

import {
  Stack,
  TableHead as MuiTableHead,
  TableRow,
  TableRowProps,
  Typography,
} from "@mui/material";

export interface TableHeadProps extends PropsWithChildren {
  title?: string;
  icon?: React.ReactNode;
  tableRowProps?: TableRowProps;
}

export const TableHead: React.FC<TableHeadProps> = ({ children, icon, title, tableRowProps }) => (
  <MuiTableHead>
    {title != null && (
      <Stack
        alignItems="center"
        direction="row"
        gap={1}
        p={2}
        pb={0}
        sx={{
          color: "text.primary",
          wordSpacing: "6px",
          "& svg": { height: 20, width: 20 },
        }}
      >
        {icon}
        <Typography fontWeight={600} variant="body1">
          {title}
        </Typography>
      </Stack>
    )}

    <TableRow {...tableRowProps}>{children}</TableRow>
  </MuiTableHead>
);

export default TableHead;