'use client'

import Button from '@mui/material/Button'
import OpenInNewIcon from '@mui/icons-material/OpenInNew'
import {Spotify, Applemusic, Deezer, Tidal, Youtubemusic, Amazon, Soundcloud} from '@icons-pack/react-simple-icons'

export const PLATFORM_CONFIG = {
  Spotify:      {label: 'Spotify',        bg: '#1DB954', color: '#fff', Icon: Spotify},
  Applemusic:   {label: 'Apple Music',    bg: '#FC3C44', color: '#fff', Icon: Applemusic},
  Deezer:       {label: 'Deezer',         bg: '#EF5466', color: '#fff', Icon: Deezer},
  Tidal:        {label: 'Tidal',          bg: '#000000', color: '#fff', Icon: Tidal},
  Qobuz:        {label: 'Qobuz',          bg: '#00245B', color: '#fff', Icon: null},
  Youtubemusic: {label: 'YouTube Music',  bg: '#FF0000', color: '#fff', Icon: Youtubemusic},
  Amazon:       {label: 'Amazon Music',   bg: '#00A8E1', color: '#fff', Icon: Amazon},
  Soundcloud:   {label: 'SoundCloud',     bg: '#FF5500', color: '#fff', Icon: Soundcloud},
}

export function StreamButton({lyen}) {
  const config = PLATFORM_CONFIG[lyen.plateforme] ?? {label: lyen.plateforme, bg: '#555', color: '#fff', Icon: null}
  const PlatformIcon = config.Icon
  return (
    <Button
      href={lyen.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>
  )
}