{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "bg-media",
  "type": "registry:ui",
  "description": "Background media component with video/image support and overlay effects",
  "dependencies": [
    "class-variance-authority"
  ],
  "files": [
    {
      "path": "registry/default/ui/bg-media.tsx",
      "content": "\"use client\"\n\nimport React, { useRef, useState } from \"react\"\nimport { cva } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\n// Make sure this utility exists in your project for combining class names\n\n// Define the type for the variant and type props\ntype OverlayVariant = \"none\" | \"light\" | \"dark\"\ntype MediaType = \"image\" | \"video\"\n\n// Update the cva call with these types\nconst backgroundVariants = cva(\n  \"relative h-screen max-h-[1000px] min-h-[500px] w-full lg:min-h-[600px]\",\n  {\n    variants: {\n      overlay: {\n        none: \"\",\n        light:\n          \"before:absolute before:inset-0 before:bg-white before:opacity-30\",\n        dark: \"before:absolute before:inset-0 before:bg-black before:opacity-30\",\n      },\n      type: {\n        image: \"\",\n        video: \"z-10\",\n      },\n    },\n    defaultVariants: {\n      overlay: \"none\",\n      type: \"image\",\n    },\n  }\n)\n\ninterface BackgroundMediaProps {\n  variant?: OverlayVariant\n  type?: MediaType\n  src: string\n  alt?: string\n}\n\nexport const BackgroundMedia: React.FC<BackgroundMediaProps> = ({\n  variant = \"light\",\n  type = \"image\",\n  src,\n  alt = \"\",\n}) => {\n  const [isPlaying, setIsPlaying] = useState(true)\n  const mediaRef = useRef<HTMLVideoElement | null>(null)\n\n  const toggleMediaPlay = () => {\n    if (type === \"video\" && mediaRef.current) {\n      if (isPlaying) {\n        mediaRef.current.pause()\n      } else {\n        mediaRef.current.play()\n      }\n      setIsPlaying(!isPlaying)\n    }\n  }\n\n  const mediaClasses = cn(\n    backgroundVariants({ overlay: variant, type }),\n    \"overflow-hidden\"\n  )\n\n  const renderMedia = () => {\n    if (type === \"video\") {\n      return (\n        <video\n          ref={mediaRef}\n          aria-hidden=\"true\"\n          muted\n          className=\"pointer-events-none absolute inset-0 h-full w-full object-cover transition-opacity duration-300\"\n          autoPlay\n          playsInline\n        >\n          <source src={src} type=\"video/mp4\" />\n          Your browser does not support the video tag.\n        </video>\n      )\n    } else {\n      return (\n        <img\n          src={src}\n          alt={alt}\n          className=\"absolute inset-0 h-full w-full rounded-br-[88px] object-cover\"\n          loading=\"eager\"\n        />\n      )\n    }\n  }\n\n  return (\n    <div className={mediaClasses}>\n      {renderMedia()}\n      {type === \"video\" && (\n        <button\n          aria-label={isPlaying ? \"Pause video\" : \"Play video\"}\n          className=\"absolute right-4 bottom-4 z-50 bg-gray-900 px-4 py-2 text-white hover:bg-gray-700 focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 focus:outline-none\"\n          onClick={toggleMediaPlay}\n        >\n          {isPlaying ? \"Pause\" : \"Play\"}\n        </button>\n      )}\n    </div>\n  )\n}\n\nexport default BackgroundMedia\n",
      "type": "registry:ui"
    }
  ]
}