import PropTypes from 'prop-types'
import {Box, CircularProgress} from '@mui/material'
import dynamic from 'next/dynamic'

const MIZIK_URL = process.env.NEXT_PUBLIC_OKI_MIZIK_URL || 'https://funkwhale-server.com'
const MIZIK_API_USER = process.env.NEXT_PUBLIC_MIZIK_API_USER || 'user'
const MIZIK_API_PASSWORD = process.env.NEXT_PUBLIC_MIZIK_API_PASSWORD || 'password'

const DinamikLekte = dynamic(
  () => import('./lekte'),
  {ssr: false, loading: () => <CircularProgress sx={{color: '#29d'}} />}
)

export default function OkiMizik({id, teks}) {
  const mizikStreamUrl = `${MIZIK_URL}/rest/stream?u=${MIZIK_API_USER}&p=${MIZIK_API_PASSWORD}&id=${id}`
  const detailsUrl = `${MIZIK_URL}/library/tracks/${id}`

  return (
    <Box style={{marginTop: '0.3em', display: 'flex', flexDirection: 'column', alignItems: 'center'}}>
      <DinamikLekte audio={mizikStreamUrl} url={detailsUrl} teks={teks} />
    </Box>
  )
}

OkiMizik.propTypes = {
  id: PropTypes.number.isRequired,
  teks: PropTypes.object.isRequired
}