ldc-ovoteam/resources/ts/front/Components/Base/VideoEmbedWithConsent.tsx

import { VideoProviderName } from "@/front/lib/constants";
import useCookieNotice from "@/hooks/use-cookie-notice";
import trans from "@/hooks/use-translations";
import { cn } from "@/lib/utils";
import { Loader } from "lucide-react";

type Props = {
  service: VideoProviderName;
  embedUrl: string;
  title: string;
  className?: string;
  iframeContainerClassName?: string;
};

function NoStatusComponent({
  loading,
  service,
  accept,
}: {
  loading: boolean;
  service: VideoProviderName;
  accept: () => void;
}) {
  const warning = trans(`cookie-notice.custom.${service}.warning`);
  const acceptLabel = trans(`cookie-notice.custom.${service}.accept`);
  return loading ? (
    <div className="py-48 flex justify-center">
      <Loader className="size-8 text-primary-foreground/40 animate-spin" />
    </div>
  ) : (
    <div className="py-48 flex gap-2 justify-center flex-col md:flex-row">
      <p>{warning}</p>
      <button
        className="underline font-bold hover:opacity-80 transition"
        type="button"
        onClick={accept}
      >
        {acceptLabel}
      </button>
    </div>
  );
}

export default function VideoEmbedWithConsent({
  service,
  embedUrl,
  title,
  className = "",
  iframeContainerClassName = "",
}: Props) {
  const { status, loading, accept } = useCookieNotice(service);

  return (
    <div className={`video-inlaid text-center ${className}`}>
      {!status ? (
        <NoStatusComponent
          loading={loading}
          service={service}
          accept={accept}
        />
      ) : (
        <div className={cn("h-[81vh]", iframeContainerClassName)}>
          <iframe
            className="border-none"
            width="100%"
            height="100%"
            src={embedUrl}
            title={title}
            allow="autoplay; encrypted-media"
            allowFullScreen
          />
        </div>
      )}
    </div>
  );
}