"use client";

import { useState } from "react";

import { Icon } from "@/components/icons";

/**
 * Eingebettetes Video mit Zwei-Klick-Lösung.
 *
 * Ein Rahmen von YouTube oder Vimeo baut beim Laden eine Verbindung zum
 * Anbieter auf — auf einer Seite, die Fremde nach einem Scan zu sehen
 * bekommen, ist das ohne Zustimmung nicht in Ordnung. Deshalb erscheint der
 * Rahmen erst nach einem Klick, und es steht vorher da, was dabei passiert.
 */
export function EmbeddedVideo({
  embedUrl,
  provider,
  title,
}: {
  embedUrl: string;
  provider: string;
  title: string;
}) {
  const [gestartet, setGestartet] = useState(false);

  if (gestartet) {
    return (
      <div className="aspect-video overflow-hidden rounded-2xl bg-black shadow-sm">
        <iframe
          src={embedUrl}
          title={title}
          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
          allowFullScreen
          className="h-full w-full border-0"
        />
      </div>
    );
  }

  return (
    <button
      type="button"
      onClick={() => setGestartet(true)}
      className="group flex aspect-video w-full flex-col items-center justify-center gap-3 rounded-2xl border border-slate-300 bg-slate-900 px-6 text-center shadow-sm transition-colors hover:bg-slate-800"
    >
      <span className="flex size-16 items-center justify-center rounded-full bg-white/10 text-white transition-colors group-hover:bg-white/20">
        <Icon name="video" className="size-8" />
      </span>
      <span className="font-medium text-white">Video abspielen</span>
      <span className="max-w-xs text-xs leading-relaxed text-slate-300">
        Beim Abspielen wird eine Verbindung zu {provider} hergestellt. Dabei
        werden Daten an den Anbieter übertragen.
      </span>
    </button>
  );
}