"use client";

import * as React from "react";
import { Plus, SearchX } from "lucide-react";
import { cn } from "@/lib/utils";

export function EmptyState({
  title = "Nothing here yet",
  description = "Publish your first component and it will show up right here.",
  actionLabel = "Publish a component",
  onAction,
  icon,
  className,
}: {
  title?: string;
  description?: string;
  actionLabel?: string;
  onAction?: () => void;
  icon?: React.ReactNode;
  className?: string;
}) {
  return (
    <div
      className={cn(
        "flex w-full flex-col items-center justify-center rounded-xl border border-dashed px-6 py-16 text-center",
        className
      )}
    >
      <div className="relative mb-6 h-20 w-40">
        {[0, 1, 2].map((index) => (
          <div
            key={index}
            className="absolute left-1/2 rounded-lg border bg-card shadow-sm transition-transform"
            style={{
              width: 112 - index * 14,
              height: 64 - index * 8,
              top: index * 7,
              transform:
                "translateX(-50%) rotate(" + (index - 1) * 6 + "deg)",
              opacity: 1 - index * 0.25,
              zIndex: 3 - index,
            }}
          />
        ))}
        <span className="absolute inset-0 z-10 flex items-center justify-center text-muted-foreground">
          {icon ?? <SearchX className="size-6" />}
        </span>
      </div>

      <h3 className="text-base font-medium">{title}</h3>
      <p className="mt-1 max-w-sm text-pretty text-sm text-muted-foreground">{description}</p>

      {actionLabel && (
        <button
          onClick={onAction}
          className="mt-5 inline-flex h-9 items-center gap-2 rounded-md bg-primary px-4 text-sm font-medium text-primary-foreground transition-opacity hover:opacity-90"
        >
          <Plus className="size-4" />
          {actionLabel}
        </button>
      )}
    </div>
  );
}

Related components