import { Avatar, Box, Stack, Typography } from '@mui/material';
import type { LiteralUnion } from 'type-fest';

type Props = {
  name: string;
  description?: string;
  logo?: string;
  size?: number;
  extra?: React.ReactNode;
  variant?: LiteralUnion<'square' | 'rounded' | 'circular', string>;
};

// FIXME: @wangshijun add image filter for logo
export default function ProductCard({
  size = 48,
  variant = 'rounded',
  name,
  logo = '',
  description = '',
  extra = undefined,
}: Props) {
  const s = { width: size, height: size };
  return (
    <Stack
      direction="row"
      spacing={1}
      sx={{
        alignItems: 'center',
        flex: 2,
        width: '100%',
      }}>
      {logo ? (
        // @ts-ignore
        <Avatar src={logo} alt={name} variant={variant} sx={s} />
      ) : (
        // @ts-ignore
        <Avatar variant={variant} sx={s}>
          {(name || '?').slice(0, 1)}
        </Avatar>
      )}
      <Stack
        direction="column"
        sx={{
          alignItems: 'flex-start',
          justifyContent: 'space-around',
          flexShrink: 1,
          overflow: 'hidden',
        }}>
        <Typography
          className="cko-ellipsis"
          variant="body1"
          title={name}
          sx={{
            color: 'text.primary',
            fontWeight: 500,
            mb: 0.5,
            lineHeight: 1.2,
            fontSize: 16,
          }}>
          {name}
        </Typography>
        {description && (
          <Typography
            variant="body1"
            title={description}
            sx={{
              color: 'text.lighter',
              fontSize: '0.74375rem',
              mb: 0.5,
              lineHeight: 1.2,
              textAlign: 'left',
            }}>
            {description}
          </Typography>
        )}
        {extra && (
          <Box
            sx={{
              color: 'text.lighter',
              fontSize: '0.74375rem',
            }}>
            {extra}
          </Box>
        )}
      </Stack>
    </Stack>
  );
}