import { signal } from "@preact/signals"

export function ListenOn(props: { where: string, link: string }) {
    return <li>
        <a href={props.link} rel="noopener noreferrer">
            Listen on {props.where}
        </a>
    </li>
}

export const startMenuOpen = signal(false)

export function StartMenu() {
    return <div id="start_menu" style={{ display: startMenuOpen.value ? undefined : "none" }}>
        <div id="profile">
            <img src="/assets/pfp.jpg" />
            sunny xo sauce
        </div>
        <div id="start_menu_content">
            <div>
                <p>
                    <a href="https://sunnexo.moe/netpunk#credits" rel="noopener noreferrer">Netpunk Credits</a>
                </p>
                <p>
                    Sunnexo fumo icon taken from <a href="https://sunnexo.moe" rel="noopener noreferrer">sunnexo.moe</a>
                </p>
                <p>
                    Some elements copied from Netpunk's album cover
                </p>
                <p>
                    Font used: <a href="https://www.dafont.com/nintendo-ds-bios.font" rel="noopener noreferrer">Nintendo DS BIOS</a>
                </p>
                <p>
                    <a href="https://git.twoexem.com/darkuss/netpunk" rel="noopener noreferrer">Source code</a>
                </p>
                <p>
                    <a href="https://git.twoexem.com/darkuss/netpunk/tree/LICENSES.md">License info</a>
                </p>
            </div>
            <ul>
                <ListenOn where="Youtube" link="https://youtu.be/4SwA8vwB8rU" />
                <ListenOn where="Bandcamp" link="https://sunnexo.bandcamp.com/album/netpunk" />
                <ListenOn where="Newgrounds" link="https://www.newgrounds.com/audio/listen/1605640" />
                <ListenOn where="SoundCloud" link="https://soundcloud.com/sunnexo/netpunk" />
            </ul>
        </div>
        <div id="footer">
            Made with &lt;3 by <a href="https://darkuss.fyi">darkuss</a>
        </div>
    </div>
}