"use client";

import { useState } from "react";

export function VideoEmbed({ id, title }: { id: string; title: string }) {

  const [play, setPlay] = useState(false);

  if (play) {

    return (

      <div className="aspect-video w-full overflow-hidden border border-[var(--line)]">

        <iframe

          src={`https://www.youtube-nocookie.com/embed/${id}?autoplay=1`}

          title={title}

          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"

          allowFullScreen

          className="h-full w-full"

        />

      </div>

    );

  }

  return (

    <button

      type="button"

      onClick={() => setPlay(true)}

      aria-label={`Play ${title}`}

      className="group relative block aspect-video w-full overflow-hidden border border-[var(--line)]"

    >

      <img

        src={`https://i.ytimg.com/vi/${id}/hqdefault.jpg`}

        alt=""

        className="h-full w-full object-cover opacity-70 transition duration-300 group-hover:opacity-100"

      />

      <span className="absolute inset-0 grid place-items-center">

        <span className="flex h-16 w-16 items-center justify-center rounded-full bg-gold text-stage transition group-hover:bg-gold-bright">

          <svg width="20" height="22" viewBox="0 0 20 22" fill="currentColor" aria-hidden="true">

            <path d="M0 0l20 11L0 22z" />

          </svg>

        </span>

      </span>

    </button>

  );

}