"use client" import React, { useRef, useState } from "react" import { cva } from "class-variance-authority" import { cn } from "@/lib/utils" // Make sure this utility exists in your project for combining class names // Define the type for the variant and type props type OverlayVariant = "none" | "light" | "dark" type MediaType = "image" | "video" // Update the cva call with these types const backgroundVariants = cva( "relative h-screen max-h-[1000px] w-full min-h-[500px] lg:min-h-[600px]", { variants: { overlay: { none: "", light: "before:absolute before:inset-0 before:bg-white before:opacity-30", dark: "before:absolute before:inset-0 before:bg-black before:opacity-30", }, type: { image: "", video: "z-10", }, }, defaultVariants: { overlay: "none", type: "image", }, } ) interface BackgroundMediaProps { variant?: OverlayVariant type?: MediaType src: string alt?: string } export const BackgroundMedia: React.FC = ({ variant = "light", type = "image", src, alt = "", }) => { const [isPlaying, setIsPlaying] = useState(true) const mediaRef = useRef(null) const toggleMediaPlay = () => { if (type === "video" && mediaRef.current) { if (isPlaying) { mediaRef.current.pause() } else { mediaRef.current.play() } setIsPlaying(!isPlaying) } } const mediaClasses = cn( backgroundVariants({ overlay: variant, type }), "overflow-hidden" ) const renderMedia = () => { if (type === "video") { return (

) } else { return ( {alt}

) } } return (

{renderMedia()} {type === "video" && ( )}

) } export default BackgroundMedia