import { usePlaylists } from "../api/audio";
import { Link } from "react-router-dom";
import { useEffect } from 'react'
import { useNavigate } from 'react-router-dom'


export default function AudioPlaylists() {

    const { data, isLoading, isError, error, isFetching } = usePlaylists({})

    const navigate = useNavigate()
    useEffect(() => {
        if (isError && error?.response?.status === 401) {
            navigate("/login", { replace: true })
        }
    }, [isError, error, navigate])


    if (isLoading) return <p className="text-slate-400">Загрузка…</p>
    if (isError) return <p className="text-red-400">Ошибка: {error.message}</p>


    const playlists = data?.playlists ?? []

    if (playlists.length === 0) return <p className="text-slate-400">empty</p>

    return (
        playlists.map((pl) => (
            <Link key={pl.id} to={`/audio/${pl.id}`} >
            <div className="channel mt-4 bg-zinc-950 border-2 border-zinc-800 rounded-xl p-3">
                <h3 className="text-white text-3xl">{pl.title}</h3>
                <p>videos: {pl.audios_count}</p>
            </div>
            </Link>
            
        )
    )
)
}