'use client'

import PropTypes from 'prop-types'
import Card from '@mui/material/Card'
import CardActionArea from '@mui/material/CardActionArea'
import CardContent from '@mui/material/CardContent'
import CardMedia from '@mui/material/CardMedia'
import Typography from '@mui/material/Typography'
import Box from '@mui/material/Box'
import Chip from '@mui/material/Chip'
import Link from 'next/link'

import {getAlias} from '../../lib/utils/format'
import {formatKuveti} from '../../lib/kuveti'

const IMAGE_URL = process.env.NEXT_PUBLIC_API_URL_ROOT || 'http://localhost:1337'
const noImageUrl = 'https://place-hold.it/600x600?text=Indisponible'

export default function AnVedette({teks}) {
  const {titre, artistes, annee, couverture, slug} = teks
  const aliases = getAlias(artistes, teks.prioriteArtistes)
  const fmt = formatKuveti(couverture)
  const imageUrl = fmt?.url ? `${IMAGE_URL}${fmt.url}` : noImageUrl

  return (
    <Box sx={{mb: 4}}>
      <Chip
        label='NEW RELEASE'
        size='small'
        color='primary'
        sx={{mb: 1.5, fontWeight: 'bold', letterSpacing: 1}}
      />
      <Card sx={{borderRadius: 2, overflow: 'hidden'}}>
        <CardActionArea component={Link} href={`/paroles/${slug}`}>
          <CardMedia
            component='img'
            image={imageUrl}
            alt={titre}
            sx={{
              width: '100%',
              aspectRatio: {xs: '1 / 1', sm: '16 / 9'},
              objectFit: 'cover',
              maxHeight: {sm: 420}
            }}
          />
          <CardContent>
            <Typography variant='h5' component='h2' sx={{fontWeight: 'bold', mb: 0.5}}>
              {titre}
            </Typography>
            <Typography variant='body1' color='text.secondary'>
              {aliases}
            </Typography>
            {annee && (
              <Typography variant='body2' color='text.secondary'>
                {annee}
              </Typography>
            )}
          </CardContent>
        </CardActionArea>
      </Card>
    </Box>
  )
}

AnVedette.propTypes = {
  teks: PropTypes.object.isRequired
}