Pattern Carousel

import { PatternCarousel } from "@/components/pluto-ui/pattern-carousel"
import type { PatternType } from "@/components/pluto-ui/pattern-carousel"
import { useState } from "react"

const items = [
  { id: "1", image: "https://example.com/image1.jpg", number: 1 },
  { id: "2", image: "https://example.com/image2.jpg", number: 2 },
]

function MyCarousel() {
  const [pattern, setPattern] = useState<PatternType>("circle")

  return (
    <PatternCarousel
      items={items}
      pattern={pattern}
      onPatternChange={setPattern}
    />
  )
}

export type PatternType =
  | "circle"
  | "wave"
  | "stagger"
  | "grid"
  | "fan"
  | "depth"

export interface PatternCarouselItem {
  id: string
  image: string
  number?: number
}

export interface PatternCarouselProps {
  items: PatternCarouselItem[]
  pattern?: PatternType
  onPatternChange?: (pattern: PatternType) => void
  wheelRadius?: number
  cardWidth?: number
  cardHeight?: number
  className?: string
  children?: React.ReactNode
}