import React from 'react'

import { colors } from '../Colors'
import { SocialMedia } from '../Consts'
import Facebook from '../icons/Facebook'
import Instagram from '../icons/Instagram'
import Twitter from '../icons/Twitter'

export const SocialIcon: React.FC<{
  dspSlug: SocialMedia
  disabled?: boolean
}> = ({ dspSlug, disabled }) => {
  const fill = disabled ? colors.metals.metal2 : undefined
  switch (dspSlug) {
    case 'facebook':
      return <Facebook fill={fill} />
    case 'twitter':
      return <Twitter fill={fill} />
    case 'instagram':
      return <Instagram fill={fill} />
    default:
      return <></>
  }
}