import {
  Empty,
  EmptyContent,
  EmptyDescription,
  EmptyHeader,
  EmptyMedia,
  EmptyTitle,
} from "@/components/ui/empty"
import { IconStack } from "@/components/reui/icon-stack"
import { InboxIcon } from "lucide-react"
import { cn } from "@/lib/utils"
import type { ReactNode } from "react"

interface EmptyStateProps {
  icon?: ReactNode
  title: string
  description?: string
  action?: ReactNode
  className?: string
}

/**
 * ReUI Empty + IconStack — Frame-friendly empty-state-14/12.
 * Preview: https://reui.io/preview/base/empty-state-14 · https://reui.io/preview/base/empty-state-12
 */
function EmptyState({ icon, title, description, action, className }: EmptyStateProps) {
  return (
    <Empty className={cn("border-0 bg-transparent py-16", className)}>
      <EmptyHeader className="gap-5">
        <EmptyMedia className="mb-0">
          <IconStack aria-hidden="true" className="h-14 w-12">
            {icon ?? <InboxIcon strokeWidth={1.9} aria-hidden="true" className="size-5" />}
          </IconStack>
        </EmptyMedia>
        <EmptyTitle>{title}</EmptyTitle>
        {description ? <EmptyDescription>{description}</EmptyDescription> : null}
      </EmptyHeader>
      {action ? <EmptyContent>{action}</EmptyContent> : null}
    </Empty>
  )
}

export { EmptyState, type EmptyStateProps }