openmonetis/components/empty-state.tsx

import {
  Empty,
  EmptyContent,
  EmptyDescription,
  EmptyHeader,
  EmptyMedia,
  EmptyTitle,
} from "@/components/ui/empty";
import { cn } from "@/lib/utils/ui";
import type { ReactNode } from "react";

interface EmptyStateProps {
  title: ReactNode;
  description?: ReactNode;
  action?: ReactNode;
  media?: ReactNode;
  mediaVariant?: "default" | "icon";
  className?: string;
  contentClassName?: string;
  children?: ReactNode;
}

export function EmptyState({
  title,
  description,
  media,
  mediaVariant = "default",
  className,
  contentClassName,
  children,
}: EmptyStateProps) {
  const hasContent = Boolean(children);

  return (
    <Empty className={cn("w-full max-w-xl min-h-[320px]", className)}>
      <EmptyHeader>
        {media ? (
          <EmptyMedia variant={mediaVariant} className="mb-0">
            {media}
          </EmptyMedia>
        ) : null}
        <EmptyTitle>{title}</EmptyTitle>
        {description ? (
          <EmptyDescription>{description}</EmptyDescription>
        ) : null}
      </EmptyHeader>

      {hasContent ? (
        <EmptyContent className={cn(contentClassName)}>{children}</EmptyContent>
      ) : null}
    </Empty>
  );
}