import { type FC } from 'react';

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

type Props = {
  title: string;
  value: unknown;
  badgeContent?: number;
};

const CountFilterItem: FC<Props> = ({ title, value, badgeContent }) => {
  if (Array.isArray(value) && value.length === 0) {
    return null;
  }

  const content = badgeContent || (Array.isArray(value) ? value.length : 1);

  return (
    <Stack
      sx={{
        width: 1,
        flexDirection: 'row',
        alignItems: 'center',
        gap: 2,
        borderRadius: 1,
        backgroundColor: ({ palette }) =>
          palette.new.background.layout.tertiary,
        p: 2,
      }}
    >
      <Typography
        variant="globalS"
        fontWeight="fontWeightSemiBold"
      >
        {title}
      </Typography>
      <Badge
        badgeContent={content}
        color="primary"
      />
    </Stack>
  );
};

export default CountFilterItem;
