'use client'

import PropTypes from 'prop-types'
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>
  )
}

StreamButton.propTypes = {
  lyen: PropTypes.shape({
    plateforme: PropTypes.string.isRequired,
    url: PropTypes.string.isRequired
  }).isRequired
}
