import type React from "react"
import { cn } from "@/lib/utils"

interface ComponentShowcaseProps {
  title: string
  description?: string
  children: React.ReactNode
  className?: string
}

export function ComponentShowcase({ title, description, children, className }: ComponentShowcaseProps) {
  return (
    <div className={cn("space-y-4", className)}>
      <div>
        <h3 className="text-lg font-medium">{title}</h3>
        {description && <p className="text-sm text-muted-foreground">{description}</p>}
      </div>
      <div className="flex flex-wrap gap-4">{children}</div>
    </div>
  )
}

interface ComponentVariantProps {
  title: string
  children: React.ReactNode
}

export function ComponentVariant({ title, children }: ComponentVariantProps) {
  return (
    <div className="space-y-2">
      <h3 className="text-sm font-medium">{title}</h3>
      <div>{children}</div>
    </div>
  )
}

// Let's check if this component might be using a different accordion