'use client'

import PropTypes from 'prop-types'
import Chip from '@mui/material/Chip'
import IconButton from '@mui/material/IconButton'
import Tooltip from '@mui/material/Tooltip'
import {
  Mastodon, Peertube,
  Instagram, Youtube, Tiktok,
  Spotify, Deezer, Applemusic, Bandcamp, Soundcloud,
  Facebook, Twitter,
} from '@icons-pack/react-simple-icons'

const SOCIAL_CONFIG = {
  Mastodon: {label: 'Mastodon', bg: '#6364FF', color: '#fff', Icon: Mastodon},
  Peertube: {label: 'PeerTube', bg: '#F2690D', color: '#fff', Icon: Peertube},
  Pixelfed: {label: 'Pixelfed', bg: '#11D49D', color: '#fff', Icon: null},
  Funkwhale: {label: 'Funkwhale', bg: '#E01B60', color: '#fff', Icon: null},
  Bluesky: {label: 'Bluesky', bg: '#0085FF', color: '#fff', Icon: null},
  Instagram: {label: 'Instagram', bg: '#E4405F', color: '#fff', Icon: Instagram},
  Youtube: {label: 'YouTube', bg: '#FF0000', color: '#fff', Icon: Youtube},
  Tiktok: {label: 'TikTok', bg: '#000000', color: '#fff', Icon: Tiktok},
  Spotify: {label: 'Spotify', bg: '#1DB954', color: '#fff', Icon: Spotify},
  Deezer: {label: 'Deezer', bg: '#EF5466', color: '#fff', Icon: Deezer},
  Applemusic: {label: 'Apple Music', bg: '#FC3C44', color: '#fff', Icon: Applemusic},
  Bandcamp: {label: 'Bandcamp', bg: '#1DA0C3', color: '#fff', Icon: Bandcamp},
  Soundcloud: {label: 'SoundCloud', bg: '#FF5500', color: '#fff', Icon: Soundcloud},
  Facebook: {label: 'Facebook', bg: '#1877F2', color: '#fff', Icon: Facebook},
  Twitter: {label: 'X / Twitter', bg: '#000000', color: '#fff', Icon: Twitter},
  Linktree: {label: 'Linktree', bg: '#43E660', color: '#000', Icon: null},
  SiteWeb: {label: 'Site web', bg: '#555555', color: '#fff', Icon: null},
}

export function SocialButton({rezo}) {
  const config = SOCIAL_CONFIG[rezo.plateforme] ?? {label: rezo.plateforme, bg: '#555', color: '#fff', Icon: null}
  const PlatformIcon = config.Icon

  if (PlatformIcon) {
    return (
      <Tooltip title={config.label}>
        <IconButton
          component='a'
          href={rezo.url}
          target='_blank'
          rel='noopener noreferrer'
          size='small'
          sx={{
            bgcolor: config.bg,
            width: 34,
            height: 34,
            '&:hover': {bgcolor: config.bg, opacity: 0.8},
          }}
        >
          <PlatformIcon size={17} color={config.color} />
        </IconButton>
      </Tooltip>
    )
  }

  return (
    <Tooltip title={rezo.url}>
      <Chip
        clickable
        label={config.label}
        component='a'
        href={rezo.url}
        target='_blank'
        rel='noopener noreferrer'
        size='small'
        sx={{bgcolor: config.bg, color: config.color, fontWeight: 600}}
      />
    </Tooltip>
  )
}

SocialButton.propTypes = {
  rezo: PropTypes.shape({
    plateforme: PropTypes.string.isRequired,
    url: PropTypes.string.isRequired
  }).isRequired
}
