import { IconEdit, IconTrash } from '@material-hu/icons/tabler';
import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

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

import { useLokaliseTranslation } from 'src/utils/i18n';

interface PrizeCardProps {
  name: string;
  description?: string;
  positionCaption?: string;
  onEdit?: () => void;
  onDelete?: () => void;
}

const PrizeCard = ({
  name,
  description,
  positionCaption,
  onEdit,
  onDelete,
}: PrizeCardProps) => {
  const { t } = useLokaliseTranslation('general');

  return (
    <CardContainer
      padding={0}
      fullWidth
    >
      <Stack
        sx={{
          display: 'flex',
          flexDirection: 'row',
          alignItems: 'center',
          p: { xs: 2, sm: 3 },
        }}
      >
        <Stack sx={{ flex: 1, gap: 0.5 }}>
          {positionCaption && (
            <Typography
              variant="globalXXS"
              sx={{ color: theme => theme.palette.new.text.neutral.lighter }}
            >
              {positionCaption}
            </Typography>
          )}
          <Typography
            variant="globalXS"
            fontWeight="fontWeightSemiBold"
          >
            {name}
          </Typography>
          {description && (
            <Typography
              variant="globalXXS"
              sx={{ color: theme => theme.palette.new.text.neutral.lighter }}
            >
              {description}
            </Typography>
          )}
        </Stack>
        {(onEdit || onDelete) && (
          <HuMenuList
            options={[
              ...(onEdit
                ? [{ Icon: IconEdit, title: t('edit'), onClick: onEdit }]
                : []),
              ...(onDelete
                ? [{ Icon: IconTrash, title: t('delete'), onClick: onDelete }]
                : []),
            ]}
            position="left"
          />
        )}
      </Stack>
    </CardContainer>
  );
};

export default PrizeCard;