import React from 'react';
import { CollectionInterface } from '../interfaces';
import { Box, Stack, Typography, useTheme } from '@mui/material';
import { Card, OneLineTypography, SquareBox } from './style';
import { Iconfont } from './icon';
import { handleUri } from '../helpers/helper';

export interface CollectionCardProps {
  collection: CollectionInterface | undefined;
  onClick: any;
}

export const CollectionCard = ({
  collection,
  onClick,
}: CollectionCardProps) => {
  const theme = useTheme();

  return (
    <Card
      onClick={onClick}
      sx={{
        background:
          theme.palette.mode === 'dark'
            ? 'rgba(0, 0, 0, 0.2)'
            : 'rgb(244, 246, 248)',
        borderRadius: '12px',
        cursor: 'pointer',
      }}
    >
      <SquareBox>
        <img
          style={{
            width: '100%',
            height: '100%',
            display: 'block',
            borderTopLeftRadius: '16px',
            borderTopRightRadius: '16px',
          }}
          src={handleUri(collection?.logo_url)}
          alt={'collection'}
        />
      </SquareBox>
      <Stack
        spacing={'4px'}
        sx={{
          alignItems: 'flex-start',
          p: 2,
          bottom: '8px',
          left: '8px',
          right: '8px',
          backdropFilter: 'blur(20px)',
          borderRadius: '8px',
          py: 4,
        }}
      >
        <Box width={'100%'}>
          <OneLineTypography variant={'h6'} px={2} mb={2}>
            {collection?.name}
          </OneLineTypography>
        </Box>
        <Stack direction={'row'} alignItems={'center'} px={2}>
          <img
            src={handleUri(collection?.mch_profile_url)}
            width={26}
            height={26}
            style={{ borderRadius: '30px' }}
          />
          <Typography variant={'subtitle1'} ml={2} fontSize={'13px'}>
            {collection?.mch_name}
          </Typography>
          <Iconfont name={'assessed-badge'} />
        </Stack>
      </Stack>
    </Card>
  );
};