import { useEffect, useState } from "preact/hooks"
import { Signal } from "@preact/signals";
import { memo } from "preact/compat";

const Iframe = memo(function Iframe() {
    return <iframe style="border: 0; height: 30em" src="https://bandcamp.com/EmbeddedPlayer/album=3374731395/size=large/bgcol=000000/linkcol=ff0047/transparent=true/" seamless><a href="https://sunnexo.bandcamp.com/album/netpunk">Netpunk by Sunnexo</a></iframe>
})

export const Music = memo(function Music({ title }: Music.Props) {
    const [userApproves, setUserApproves] = useState(false);

    useEffect(() => {
        title.value = "Stream on BandCamp"
    }, [])

    if (userApproves) {
        return <Iframe />
    } else {
        return <div class="external_warning">
            <div>Click here to load player from <a href="https://bandcamp.com">https://bandcamp.com</a></div>
            <button onClick={() => setUserApproves(true)}>
                Load player
            </button>
        </div>
    }
})

namespace Music {
    export type Props = {
        title: Signal<string | undefined>,
    }
}