import React from 'react'
import {Box, BoxProps, useTheme} from '@mui/material'

interface IconfontProps extends BoxProps {
  size?: number
  name: string
  onClick?: any
}

export const WrapIconfont = ({name, onClick, size, ...props}: IconfontProps) => {
  return (
    <Box
      {...props}
      onClick={onClick}
      sx={{
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        width: '40px',
        height: '40px',
        // border: '1px solid #68686D',
        background: 'rgba(0, 0, 0, .2)',
        borderRadius: '12px',
      }}
    >
      <Iconfont name={name} size={size} />
    </Box>
  )
}

export const IconfontButton = ({name, onClick, size = 20, ...props}: IconfontProps) => {
  const theme = useTheme()
  const isDark = theme.palette.mode === 'dark'
  const color = () => {
    switch (name) {
      case 'heart-active':
        return 'rgb(239, 93, 119)'
      case 'assessed-badge':
        return 'primary.main'
      case 'assessedbadge':
        return 'primary.main'
      default:
        return ''
    }
  }

  return (
    <Box
      {...props}
      display={'flex'}
      alignItems={'center'}
      sx={{
        i: {
          color: color(),
        },
        width: '48px',
        height: '48px',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        borderRadius: '48px',
        cursor: 'pointer',
        '&:hover': {
          background: isDark ? 'rgba(0, 0, 0, .2)' : 'rgba(255, 255, 255, .2)',
        },
      }}
      color={color()}
    >
      <i className={`iconfont icon-${name}`} onClick={onClick} style={{fontSize: `${size}px`}} />
    </Box>
  )
}

export const Iconfont = ({name, onClick, size = 20, ...props}: IconfontProps) => {
  const color = () => {
    switch (name) {
      case 'heart-active':
        return 'rgb(239, 93, 119)'
      case 'assessed-badge':
        return 'primary.main'
      case 'assessedbadge':
        return 'primary.main'
      default:
        return ''
    }
  }

  return (
    <Box
      {...props}
      display={'flex'}
      alignItems={'center'}
      sx={{
        i: {
          color: color(),
        },
      }}
      color={color()}
    >
      <i className={`iconfont icon-${name}`} onClick={onClick} style={{fontSize: `${size}px`}} />
    </Box>
  )
}