import { Loader2 } from "lucide-react";

type Props = { label?: string; className?: string };

export function LoadingPanel({ label = "Loading…", className = "" }: Props) {
  return (
    <div
      role="status"
      aria-live="polite"
      aria-busy="true"
      className={`flex items-center justify-center gap-3 rounded-2xl border border-zinc-800/60 bg-zinc-900/40 px-6 py-10 text-sm text-zinc-400 ${className}`}
    >
      <Loader2 className="h-4 w-4 animate-spin text-accent-400" strokeWidth={2} aria-hidden="true" />
      {label}
    </div>
  );
}

export function Skeleton({ className = "" }: { className?: string }) {
  return (
    <div
      aria-hidden="true"
      className={`animate-shimmer rounded-lg bg-gradient-to-r from-zinc-800/0 via-zinc-700/40 to-zinc-800/0 [background-size:200%_100%] ${className}`}
    />
  );
}