import { createRoot } from "react-dom/client";
import React from "react";

type StreamSelectCallback = (selected: string) => void

interface MenuProps {
    items: string[]
    selectedItem: string | null
    selectCallback: StreamSelectCallback
}

export function Menu({ items, selectedItem, selectCallback }: MenuProps) {
    const menuitems = () => {
        return (
            <>
                {items.map((value, idx) => {
                    if (selectedItem == value) {
                        return <li key={idx} className="menu-item menu-selected"><a href={"#" + value} className="menu-link">{value}</a></li>
                    } else {
                        return <li key={idx} onClick={() => {
                            selectCallback(value)
                        }} className="menu-item"><a href={"#" + value} className="menu-link">{value}</a></li>
                    }
                })}
            </>
        )
    }
    return (
        <div id="menu">
            <aside>
                <a className="menu-heading" href="#">stream.t-juice.club</a>
                <ul className="menu-list">
                    {menuitems()}
                </ul>
            </aside>
        </div>
    )

}