import type { ReactNode } from "react";
import { type LucideIcon } from "lucide-react";
import { cn } from "./cn";

// Skeleton 占位骨架（加载态）。
export function Skeleton({ className }: { className?: string }) {
  return <div className={cn("animate-pulse rounded-md bg-ink-800", className)} />;
}

// EmptyState 空状态：图标 + 标题 + 说明 + 可选动作。
export function EmptyState({
  icon: Icon,
  title,
  desc,
  action,
  className,
}: {
  icon: LucideIcon;
  title: string;
  desc?: ReactNode;
  action?: ReactNode;
  className?: string;
}) {
  return (
    <div className={cn("flex h-full flex-col items-center justify-center gap-3 px-6 py-10 text-center", className)}>
      <div className="flex h-12 w-12 items-center justify-center rounded-xl border border-line bg-ink-850 text-slate-500">
        <Icon className="h-6 w-6" strokeWidth={1.5} />
      </div>
      <div className="text-sm font-medium text-slate-300">{title}</div>
      {desc && <div className="max-w-sm text-xs leading-relaxed text-slate-500">{desc}</div>}
      {action && <div className="mt-1">{action}</div>}
    </div>
  );
}
