"use client";

import { useEffect, useRef } from "react";
import { Play } from "lucide-react";

/*
 * A prévia em vídeo dos modelos animados (como no Canva): toca sozinha, sem
 * som e em loop, só enquanto aparece na tela (fora dela pausa e não baixa),
 * com a capa (a foto) por baixo até o vídeo carregar. O selinho embaixo diz
 * que o modelo é animado e quanto dura.
 */
export function VideoQueToca({ src, capa, largura, altura, nome, duracao, className = "", grande = false }: { src: string; capa: string; largura: number; altura: number; nome: string; duracao?: number; className?: string; grande?: boolean }) {
  const video = useRef<HTMLVideoElement | null>(null);
  useEffect(() => {
    const el = video.current;
    if (!el) return;
    if (grande) {
      void el.play().catch(() => undefined);
      return;
    }
    const obs = new IntersectionObserver(
      ([visto]) => {
        if (visto.isIntersecting) {
          el.preload = "auto";
          void el.play().catch(() => undefined);
        } else el.pause();
      },
      { threshold: 0.35 },
    );
    obs.observe(el);
    return () => obs.disconnect();
  }, [grande]);
  return (
    <span className="relative block" data-video-do-modelo>
      <video
        ref={video}
        src={src}
        poster={capa}
        muted
        loop
        playsInline
        preload={grande ? "auto" : "none"}
        width={largura}
        height={altura}
        aria-label={nome}
        className={`block h-auto w-full ${className}`}
        style={{ aspectRatio: `${largura} / ${altura}` }}
      />
      {duracao ? (
        <span className={`pointer-events-none absolute bottom-2 left-2 flex items-center gap-1 rounded-full bg-[#140B2B]/65 px-2 py-0.5 font-bold tabular-nums text-white backdrop-blur-sm ${grande ? "text-[12px]" : "text-[10.5px]"}`}>
          <Play size={grande ? 11 : 9} fill="currentColor" />
          {`0:${String(Math.round(duracao)).padStart(2, "0")}`}
        </span>
      ) : null}
    </span>
  );
}