Dynamic Frames

"use client"

import * as React from "react"
import { DynamicFrameLayout, FrameData } from "@/components/ui/dynamic-frames"
import { Switch } from "@/components/ui/switch"
import { Label } from "@/components/ui/label"

// --- DEMO DATA ---
// New set of visually diverse, frameless videos.
const initialFrames: FrameData[] = [
  {
    id: 1,
    video: "https://samplelib.com/lib/preview/mp4/sample-5s.mp4",
    defaultPos: { x: 0, y: 0 },
    corner: "", edgeHorizontal: "", edgeVertical: "",
  },
  {
    id: 2,
    video: "https://samplelib.com/lib/preview/mp4/sample-15s.mp4",
    defaultPos: { x: 1, y: 0 },
    corner: "", edgeHorizontal: "", edgeVertical: "",
  },
  {
    id: 3,
    video: "https://samplelib.com/lib/preview/mp4/sample-30s.mp4",
    defaultPos: { x: 2, y: 0 },
    corner: "", edgeHorizontal: "", edgeVertical: "",
  },
  {
    id: 4,
    video: "https://github.com/david-j-davis/HTML5-Dummy-Videos/raw/refs/heads/master/computer-reels.mp4",
    defaultPos: { x: 0, y: 1 },
    corner: "", edgeHorizontal: "", edgeVertical: "",
  },
  {
    id: 5,
    video: "https://ak.picdn.net/shutterstock/videos/1110778677/thumb/stock-footage-shredded-sensitive-information-documents-with-lorem-ipsum-text-sequence-footage-safeguarding.webm",
    defaultPos: { x: 1, y: 1 },
    corner: "", edgeHorizontal: "", edgeVertical: "",
  },
  {
    id: 6,
    video: "https://player.vimeo.com/progressive_redirect/playback/760212573/rendition/240p/file.mp4?loc=external&oauth2_token_id=1223210874&signature=dd07ca6f21548f06398595351f74a941661f6e6cf928ead3cc5ebae4a5c55ed0",
    defaultPos: { x: 2, y: 1 },
    corner: "", edgeHorizontal: "", edgeVertical: "",
  },
  {
    id: 7,
    video: "https://player.vimeo.com/progressive_redirect/playback/718169626/rendition/240p/file.mp4?loc=external&oauth2_token_id=1223210874&signature=3102adb9804be5ac7049821284e54ed1d299ff69e067a701a9593f1c647e5dea",
    defaultPos: { x: 0, y: 2 },
    corner: "", edgeHorizontal: "", edgeVertical: "",
  },
  {
    id: 8,
    video: "https://player.vimeo.com/progressive_redirect/playback/759081053/rendition/360p/file.mp4?loc=external&oauth2_token_id=1223210874&signature=13cf1ac477ccfc2b761ce000c521bc5b44b98c66553c12ae0720597199f2dbdd",
    defaultPos: { x: 1, y: 2 },
    corner: "", edgeHorizontal: "", edgeVertical: "",
  },
  {
    id: 9,
    video: "https://player.vimeo.com/progressive_redirect/playback/717200552/rendition/240p/file.mp4?loc=external&oauth2_token_id=1223210874&signature=5aa16a8cc12cfa935bfd0451adc5d6135e9a28b36c3b059e2fc68c75e8fa30f9",
    defaultPos: { x: 2, y: 2 },
    corner: "", edgeHorizontal: "", edgeVertical: "",
  },
]

export default function DynamicFrameLayoutDemo() {
  const [autoplayMode, setAutoplayMode] = React.useState<"all" | "hover">("all")

  return (
    <div className="w-full min-h-screen bg-background text-foreground flex items-center justify-center p-4">
      <div className="w-full max-w-6xl h-[80vh] flex flex-col gap-6">
        <div className="flex flex-wrap items-center gap-6">
          <div className="flex items-center space-x-2">
            <Switch
              id="autoplay-toggle"
              checked={autoplayMode === "all"}
              onCheckedChange={(checked) => setAutoplayMode(checked ? "all" : "hover")}
              aria-label="Toggle autoplay mode"
            />
            <Label htmlFor="autoplay-toggle">Autoplay All</Label>
          </div>
        </div>

        <DynamicFrameLayout
          frames={initialFrames}
          initialShowFrames={false} // Frames are now disabled by default
          initialAutoplayMode={autoplayMode}
          // You can further customize props here:
          // hoverSize={7}
          // gapSize={8}
        />
      </div>
    </div>
  )
}