EvoBGP/apps/web/src/components/patterns/illustrated-empty-state.tsx

import type { ReactNode } from 'react'
import type { LucideIcon } from 'lucide-react'

import { IconStack } from '@/components/reui/icon-stack'
import {
  Frame,
  FramePanel,
} from '@/components/reui/frame'
import {
  Empty,
  EmptyDescription,
  EmptyHeader,
  EmptyMedia,
  EmptyTitle,
} from '@evobgp/ui/components/empty'

/** empty-state-14: Frame + IconStack. Preview: https://reui.io/preview/base/empty-state-14 */
export function IllustratedEmptyState({
  title,
  description,
  icon: Icon,
  action,
}: {
  title: string
  description: string
  icon: LucideIcon
  action?: ReactNode
}) {
  return (
    <Frame dense spacing="sm" className="w-full">
      <FramePanel className="flex min-h-[240px] flex-col items-center justify-center gap-4 p-6 sm:p-10">
        {action ? <div className="w-full self-end">{action}</div> : null}
        <Empty className="max-w-md gap-5 bg-transparent p-0">
          <EmptyHeader className="items-center gap-5 text-center">
            <EmptyMedia className="mb-0">
              <IconStack aria-hidden>
                <Icon strokeWidth={1.9} aria-hidden />
              </IconStack>
            </EmptyMedia>
            <div className="flex flex-col items-center gap-2">
              <EmptyTitle className="text-base font-semibold tracking-tight">{title}</EmptyTitle>
              <EmptyDescription className="max-w-sm text-sm/relaxed">{description}</EmptyDescription>
            </div>
          </EmptyHeader>
        </Empty>
      </FramePanel>
    </Frame>
  )
}