import CardContainer from '@design-system/CardContainer';
import Title from '@design-system/Title';
import { typographyClasses } from '@mui/material';

import { type TableHeaderDecoratorProps } from './types';

const TableHeaderDecorator = ({
  backgroundColor,
  textColor,
  title,
  description,
}: TableHeaderDecoratorProps) => {
  return (
    <CardContainer
      color="grey"
      fullWidth
      sx={{ backgroundColor }}
    >
      <Title
        title={title}
        description={description}
        slotProps={{
          title: { sx: { color: textColor } },
          description: {
            sx: {
              [`.${typographyClasses.root}`]: {
                color: textColor,
              },
            },
          },
        }}
        variant="S"
      />
    </CardContainer>
  );
};

export default TableHeaderDecorator;
