import { FC } from 'react';

import VisibilityOutlined from '@material-hu/icons/material/VisibilityOutlined';
import Stack from '@material-hu/mui/Stack';
import { alpha, useTheme } from '@material-hu/mui/styles';
import Typography from '@material-hu/mui/Typography';

type ParticipantCountProps = {
  count: number;
};

// Create this component because DS does't support dark mode yet
// And for design and accessibility desition we need to show the pill with a dark variant
const ParticipantCountPill: FC<ParticipantCountProps> = ({ count }) => {
  const theme = useTheme();

  const color = theme.palette.base.grey[100];
  const background = alpha(theme.palette.base.grey[900], 0.4);

  return (
    <Stack
      sx={{
        flexDirection: 'row',
        alignItems: 'center',
        gap: theme.spacing(0.5),
        py: theme.spacing(1),
        px: theme.spacing(1.5),
        backgroundColor: background,
        border: `1px solid ${background}`,
        borderRadius: 2,
        maxHeight: '36px',
      }}
    >
      <VisibilityOutlined
        sx={{
          width: '16px',
          height: '16px',
          color,
        }}
      />
      <Typography
        variant="globalXS"
        fontWeight="fontWeightSemiBold"
        color={color}
      >
        {count}
      </Typography>
    </Stack>
  );
};

export default ParticipantCountPill;