import { Box, Link, Skeleton, Typography } from '@mui/material'
import { useTranslation } from 'react-i18next'
import { Token } from '../../Token/Token.js'
import { PreviewAvatar } from './NFT.style.js'
import type { NFTProps } from './types.js'

export const NFTBase: React.FC<NFTProps> = ({
  imageUrl,
  isLoading,
  collectionName,
  assetName,
  owner,
  token,
}) => {
  const { t } = useTranslation()
  return (
    <Box
      sx={{
        p: 2,
      }}
    >
      <Box
        sx={{
          display: 'flex',
        }}
      >
        {isLoading ? (
          <Skeleton
            width={96}
            height={96}
            variant="rectangular"
            sx={{ borderRadius: 1 }}
          />
        ) : (
          <PreviewAvatar src={imageUrl} />
        )}
        <Box
          sx={{
            ml: 2,
          }}
        >
          {isLoading ? (
            <Skeleton width={144} height={21} variant="text" />
          ) : (
            <Typography
              sx={{
                fontSize: 14,
                color: 'text.secondary',
              }}
            >
              {collectionName}
            </Typography>
          )}
          {isLoading ? (
            <Skeleton width={112} height={27} variant="text" />
          ) : (
            <Typography
              sx={{
                fontSize: 18,
                fontWeight: 600,
              }}
            >
              {assetName}
            </Typography>
          )}
          {isLoading ? (
            <Skeleton width={128} height={21} variant="text" />
          ) : owner ? (
            <Typography
              sx={{
                fontSize: 14,
                color: 'text.secondary',
              }}
            >
              {t('main.ownedBy')}{' '}
              <Link
                href={owner.url}
                target="_blank"
                underline="none"
                color="primary"
              >
                {owner.name}
              </Link>
            </Typography>
          ) : null}
        </Box>
      </Box>
      <Token token={token} isLoading={isLoading} mt={2} />
    </Box>
  )
}