import { Loader2 } from "lucide-react";

export function LoadingState({ label = "Loading..." }: { label?: string }) {
  return (
    <div className="flex flex-col items-center justify-center py-14 text-ink-400">
      <Loader2 className="h-5 w-5 animate-spin" aria-hidden="true" />
      <p className="mt-2 text-sm">{label}</p>
    </div>
  );
}

export function CardSkeleton() {
  return (
    <div className="animate-pulse rounded-2xl border border-ink-100 bg-white p-5">
      <div className="mb-3 h-3 w-24 rounded bg-ink-100" />
      <div className="h-6 w-32 rounded bg-ink-100" />
    </div>
  );
}