Untitled

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

export default function YouTubeShortTemplate({ text, videoUrl }) {
  const [showText, setShowText] = useState(false);

  useEffect(() => {
    const timer = setTimeout(() => setShowText(true), 1000);
    return () => clearTimeout(timer);
  }, []);

  return (
    <div className="relative w-full h-screen flex items-center justify-center bg-black">
      {/* Video Background */}
      <video
        className="absolute top-0 left-0 w-full h-full object-cover"
        src={videoUrl}
        autoPlay
        loop
        muted
      />
      
      {/* Text Overlay */}
      {showText && (
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5 }}
          className="absolute bottom-10 w-full text-center text-white px-4"
        >
          <p className="text-xl font-bold bg-black bg-opacity-50 p-2 rounded-lg">
            {text}
          </p>
        </motion.div>
      )}
    </div>
  );
}