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

import CardContainer from '@material-hu/components/design-system/CardContainer';

import { type Prize } from 'src/types/prode';

type PrizeCardProps = {
  prize: Prize;
};

const PrizeCard = ({ prize }: PrizeCardProps) => {
  return (
    <CardContainer
      padding={0}
      fullWidth
    >
      <Stack
        sx={{
          display: 'flex',
          flexDirection: 'column',
          gap: 0.5,
          p: {
            xs: 2,
            sm: 3,
          },
        }}
      >
        <Typography
          variant="globalXXS"
          sx={{ color: theme => theme.palette.new.text.neutral.lighter }}
        >
          {prize.positionCaption ?? prize.positionDisplay}
        </Typography>
        <Typography
          variant="globalXS"
          fontWeight={600}
        >
          {prize.name}
        </Typography>
        {prize.description && (
          <Typography
            variant="globalXXS"
            sx={{ color: theme => theme.palette.new.text.neutral.lighter }}
          >
            {prize.description}
          </Typography>
        )}
      </Stack>
    </CardContainer>
  );
};

export default PrizeCard;
