import { Text } from '@tarojs/components'
import './index.scss'

export type IconName =
  | 'compass'
  | 'pin'
  | 'plus'
  | 'message'
  | 'user'
  | 'search'
  | 'bell'
  | 'heart'
  | 'heart-fill'
  | 'bookmark'
  | 'close'
  | 'close-dot'
  | 'image'
  | 'video'
  | 'hash'
  | 'smile'
  | 'eye'
  | 'paw'
  | 'save'
  | 'check'
  | 'settings'
  | 'chev'
  | 'refresh'
  | 'filter'
  | 'minus'
  | 'target'
  | 'lock'
  | 'globe'
  | 'users'
  | 'info'

const iconText: Record<IconName, string> = {
  compass: '◇',
  pin: '⌖',
  plus: '+',
  message: '◌',
  user: '♙',
  search: '⌕',
  bell: '◔',
  heart: '♡',
  'heart-fill': '♥',
  bookmark: '⌑',
  close: '×',
  'close-dot': '○',
  image: '▧',
  video: '▷',
  hash: '#',
  smile: '☺',
  eye: '◉',
  paw: '✤',
  save: '▣',
  check: '✓',
  settings: '⚙',
  chev: '›',
  refresh: '↻',
  filter: '▽',
  minus: '−',
  target: '⊙',
  lock: '▤',
  globe: '◍',
  users: '♟',
  info: 'i'
}

interface IconProps {
  name: IconName
  size?: number
  className?: string
}

export function Icon({ name, size = 18, className = '' }: IconProps) {
  return (
    <Text className={`icon icon--${name} ${className}`} style={{ fontSize: `${size}px`, width: `${size}px`, height: `${size}px` }}>
      {iconText[name]}
    </Text>
  )
}

export default Icon
