auth-portal/apps/web/src/components/empty-state.tsx

/**
 * ReUI Empty + IconStack — Frame-friendly (empty-state-14 / empty-state-12).
 * Preview: https://reui.io/preview/base/empty-state-14 · https://reui.io/preview/base/empty-state-12
 * Docs: https://reui.io/docs/components/base/icon-stack
 */
import { InboxIcon, type LucideIcon } from 'lucide-react'
import { IconStack } from '@/components/reui/icon-stack'
import {
  Empty,
  EmptyContent,
  EmptyDescription,
  EmptyHeader,
  EmptyMedia,
  EmptyTitle,
} from '@authportal/ui/components/empty'
import { cn } from '@authportal/ui/lib/utils'
import type { ReactNode } from 'react'

interface EmptyStateProps {
  icon?: LucideIcon
  title: string
  description?: string
  action?: ReactNode
  className?: string
  stackedIcon?: boolean
  centered?: boolean
}

export function EmptyState({
  icon: Icon = InboxIcon,
  title,
  description,
  action,
  className,
  stackedIcon = true,
  centered = true,
}: EmptyStateProps) {
  const body = (
    <Empty
      className={cn(
        'max-w-md flex-none border-0 bg-transparent p-0',
        !centered && className,
      )}
    >
      <EmptyHeader className="gap-5 text-center">
        <EmptyMedia className="mb-0">
          {stackedIcon ? (
            <IconStack aria-hidden="true" className="h-14 w-12">
              <Icon strokeWidth={1.9} aria-hidden="true" className="size-5" />
            </IconStack>
          ) : (
            <span className="bg-muted text-muted-foreground flex size-10 items-center justify-center rounded-lg [&_svg]:size-5">
              <Icon aria-hidden="true" />
            </span>
          )}
        </EmptyMedia>
        <div className="flex flex-col items-center gap-2">
          <EmptyTitle className="text-base font-semibold tracking-tight">{title}</EmptyTitle>
          {description ? (
            <EmptyDescription className="max-w-sm text-sm/relaxed">{description}</EmptyDescription>
          ) : null}
        </div>
      </EmptyHeader>
      {action ? (
        <EmptyContent className="mt-1 items-center justify-center">{action}</EmptyContent>
      ) : null}
    </Empty>
  )

  if (!centered) return body

  return (
    <div
      className={cn(
        'flex w-full flex-1 items-center justify-center py-14 sm:py-16',
        className,
      )}
    >
      {body}
    </div>
  )
}