"use client";

import { useState } from "react";
import { motion, AnimatePresence } from "framer-motion";

interface VideoPreviewProps {
  videoId: string;
  title: string;
}

export function VideoPreview({ videoId, title }: VideoPreviewProps) {
  const [isLoading, setIsLoading] = useState(true);

  return (
    <div className="relative w-full" style={{ width: 320, height: 180 }}>
      <AnimatePresence>
        {isLoading && (
          <motion.div
            initial={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            transition={{ duration: 0.3 }}
            className="absolute inset-0 bg-black rounded-md flex items-center justify-center"
          >
            <motion.div
              animate={{ opacity: [0.5, 1, 0.5] }}
              transition={{ duration: 1.5, repeat: Infinity, ease: "easeInOut" }}
              className="w-16 h-16 border-2 border-gray-800 rounded-md"
            />
          </motion.div>
        )}
      </AnimatePresence>
      <iframe
        width="320"
        height="180"
        src={`https://www.youtube.com/embed/${videoId}`}
        title={title}
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
        allowFullScreen
        className="rounded-md border-0"
        onLoad={() => setIsLoading(false)}
      />
    </div>
  );
}