import { type ReactNode } from 'react';

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

type UserStatsDialogStatItemProps = {
  icon: ReactNode;
  label: string;
  title: string;
  count: number;
};

const UserStatsDialogStatItem = ({
  icon,
  label,
  title,
  count,
}: UserStatsDialogStatItemProps) => {
  const theme = useTheme();
  const textDefault = theme.palette.new.text.neutral.default;

  return (
    <Stack sx={{ flexDirection: 'row', alignItems: 'center', gap: 1, flex: 1 }}>
      <Stack
        sx={{
          width: 32,
          height: 32,
          borderRadius: '100px',
          backgroundColor: theme.palette.new.background.elements.brand,
          alignItems: 'center',
          justifyContent: 'center',
          flexShrink: 0,
        }}
      >
        {icon}
      </Stack>
      <Stack sx={{ flex: 1 }}>
        <Typography
          variant="globalXXS"
          sx={{ color: theme.palette.new.text.neutral.lighter }}
        >
          {label}
        </Typography>
        <Typography
          variant="globalXS"
          fontWeight="fontWeightSemiBold"
          sx={{ color: textDefault }}
        >
          {title}
        </Typography>
      </Stack>
      <Typography
        variant="globalL"
        fontWeight="fontWeightSemiBold"
        sx={{ color: textDefault }}
      >
        {count}
      </Typography>
    </Stack>
  );
};

export default UserStatsDialogStatItem;