import { useState, useEffect } from "react";

const streams = [
    { id: "aramstream", label: "Aram" },
    { id: "generalstream", label: "General" },
    { id: "gueststream", label: "Guest" },
];

export default function Stream() {
    const [activeStream, setActiveStream] = useState("aramstream");

    useEffect(() => {
        window.scrollTo({ top: 0, behavior: "smooth" });
    }, [activeStream]);

    return (
        <div className="text-ctp-text flex flex-col min-h-screen px-4 py-6">
            <div className="w-full text-center flex flex-col flex-1">
                <h1 className="text-4xl font-bold text-ctp-mauve mb-6">
                    Stream
                </h1>

                <div className="flex justify-center gap-2 mb-4">
                    {streams.map((s) => (
                        <button
                            key={s.id}
                            onClick={() => setActiveStream(s.id)}
                            className={
                                activeStream === s.id
                                    ? "ui-btn bg-ctp-surface0 text-ctp-text"
                                    : "ui-btn ui-btn:hover"
                            }
                        >
                            {s.label}
                        </button>
                    ))}
                </div>

                <div className="flex-1 min-h-0">
                    <iframe
                        src={`https://stream.aramjonghu.nl/${activeStream}`}
                        title={activeStream}
                        allow="autoplay; fullscreen; picture-in-picture"
                        className="w-full h-full border-0 rounded-lg"
                    />
                </div>
            </div>
        </div>
    );
}