import Typography from '@material-hu/mui/Typography';

import HuTableCell from '@material-hu/components/design-system/Table/components/TableCell';
import HuTableHead from '@material-hu/components/design-system/Table/components/TableHead';
import HuTableRow from '@material-hu/components/design-system/Table/components/TableRow';

export type Header = {
  id: string;
  label: string;
  sort: boolean;
  enabled: boolean;
  width?: string;
  tooltipTitle?: string;
};

type MemberHeaderCellProps = {
  headers: Header[];
};

const MemberHeaderCell = (props: MemberHeaderCellProps) => {
  const { headers } = props;

  return (
    <HuTableHead>
      <HuTableRow headerRow>
        {headers.map(header => (
          <HuTableCell
            key={header.id}
            sx={{ width: header.width || 'auto' }}
            headerCell
          >
            <Typography
              variant="globalS"
              fontWeight="fontWeightSemiBold"
            >
              {header.label}
            </Typography>
          </HuTableCell>
        ))}
        <HuTableCell
          sx={{ width: '140px' }}
          headerCell
        />
      </HuTableRow>
    </HuTableHead>
  );
};

export default MemberHeaderCell;