import CloudCard3 from "./cloud-card3";
import CloudCard2 from "./cloud-card2";

export default function NextEpisode() {
    const nextEpisode = {
        date: new Date(),
        genre: 'film fights',
        judge: 'Christian Ziermann',
        player: [
            'Johannes',
            'Lui',
            'Daniel'
        ]
    };

    return (

        <CloudCard3>
            <article className="flex flex-col items-center content-evenly">
                <h1 className="text-2xl font-bold underline flex-none mb-2.5 ">Nächste Episode</h1>
                <h2 className="text-xl text-gray ml-3">{nextEpisode.date.toDateString}</h2>
                <p className="text-sm text-center text-gray ml-3 ">
                    <label className="text-lg font-bold">Genre:</label>
                    <div className="capitalize p-3">
                        {nextEpisode.genre}
                    </div>
                </p>
                <p className="text-sm text-center ml-3">
                    <label className="text-lg font-bold">Judge:</label>
                    <div className="capitalize p-3">
                        {nextEpisode.judge}
                    </div>
                </p>
                <p className=" text-sm text-center ml-3">
                    <label className="text-lg font-bold">Spieler:</label>
                    <div className="capitalize p-3">
                        {nextEpisode.player.join(' & ')}
                    </div>
                </p>
            </article>
        </CloudCard3>
    )
}