"use client"

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

export function Empty({ className, ...props }: React.ComponentProps<"div">) {
  return <div className={cn("flex flex-col items-center gap-4 rounded-xl border bg-card p-8 text-center", className)} {...props} />
}

export function EmptyHeader({ className, ...props }: React.ComponentProps<"div">) {
  return <div className={cn("flex flex-col items-center gap-2", className)} {...props} />
}

export function EmptyMedia({ variant = "default", className, children }: { variant?: "default" | "icon"; className?: string; children?: React.ReactNode }) {
  if (variant === "icon") {
    return (
      <div className={cn("flex size-12 items-center justify-center rounded-full bg-muted text-muted-foreground", className)}>
        {children}
      </div>
    )
  }
  return <div className={className}>{children}</div>
}

export function EmptyTitle({ className, ...props }: React.ComponentProps<"div">) {
  return <div className={cn("text-lg font-semibold", className)} {...props} />
}

export function EmptyDescription({ className, ...props }: React.ComponentProps<"p">) {
  return <p className={cn("max-w-sm text-sm text-muted-foreground", className)} {...props} />
}

export function EmptyContent({ className, ...props }: React.ComponentProps<"div">) {
  return <div className={cn("mt-2 flex items-center gap-2", className)} {...props} />
}

