'use client'

import Button from '@mui/material/Button'
import OpenInNewIcon from '@mui/icons-material/OpenInNew'
import {
  Mastodon, Peertube, Pixelfed, Funkwhale,
  Bluesky, Instagram, Youtube, Tiktok,
  Spotify, Deezer, Applemusic, Bandcamp, Soundcloud,
  Facebook, X, Linktree,
} 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: Pixelfed},
  Funkwhale:  {label: 'Funkwhale',   bg: '#E01B60', color: '#fff', Icon: Funkwhale},
  Bluesky:    {label: 'Bluesky',     bg: '#0085FF', color: '#fff', Icon: Bluesky},
  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: X},
  Linktree:   {label: 'Linktree',    bg: '#43E660', color: '#000', Icon: Linktree},
  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
  return (
    <Button
      href={rezo.url}
      target='_blank'
      rel='noopener noreferrer'
      size='small'
      startIcon={PlatformIcon ? <PlatformIcon size={16} color={config.color} /> : null}
      endIcon={<OpenInNewIcon sx={{fontSize: 11}} />}
      sx={{
        bgcolor: config.bg,
        color: config.color,
        fontWeight: 700,
        fontSize: '0.72rem',
        textTransform: 'none',
        '&:hover': {bgcolor: config.bg, opacity: 0.85},
      }}
    >
      {config.label}
    </Button>
  )
}