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

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

const TableFilterDecorator = ({
  backgroundColor,
  textColor,
  title,
  description,
  icon,
}: TableFilterDecoratorProps) => {
  return (
    <CardContainer
      color="grey"
      fullWidth
      sx={{ backgroundColor }}
    >
      <Stack sx={{ flexDirection: 'row', alignItems: 'center', gap: 1.5 }}>
        {icon && (
          <Stack
            sx={{
              color: textColor,
            }}
          >
            {icon}
          </Stack>
        )}
        <Title
          title={title}
          description={description}
          slotProps={{
            title: { sx: { color: textColor } },
            description: {
              sx: {
                [`.${typographyClasses.root}`]: {
                  color: textColor,
                },
              },
            },
          }}
          variant="S"
        />
      </Stack>
    </CardContainer>
  );
};

export default TableFilterDecorator;
