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

interface AssetCardProps extends BoxProps {
  asset: AssetInterface | undefined
  collection: CollectionInterface | undefined
}

export const AssetCard = ({asset, collection, ...props}: AssetCardProps) => {
  const theme = useTheme()
  return (
    <Box
      {...props}
      sx={{
        flexGrow: 1,
        flexShrink: 0,
        borderRadius: '12px',
        cursor: 'pointer',
        // background: 'rgb(244, 246, 248)',
        border:
          theme.palette.mode === 'dark' ? '1px solid rgba(255, 255, 255, 0.08)' : '1px solid rgba(22, 22, 26, 0.08)',
        // p: '10px',
      }}
    >
      <SquareBox p={2}>
        <img
          alt={'asset'}
          style={{
            width: '100%',
            height: '100%',
            display: 'block',
            borderRadius: '12px',
          }}
          src={handleUri(asset?.uri)}
        />
      </SquareBox>
      <Box px={3} pb={2}>
        <Stack direction={'row'} alignItems={'center'}>
          <Typography variant={'body1'}>{collection?.name}</Typography>
          <Iconfont name={'assessed-badge'} />
        </Stack>
        <Typography variant={'h6'}>{asset?.name}</Typography>
      </Box>
    </Box>
  )
}