import { Loader2, TriangleAlert } from "lucide-react";

export function LoadingState({ label = "Loading" }: { label?: string }) {
  return (
    <div className="flex min-h-32 flex-col items-center justify-center gap-3 text-slate-500">
      <Loader2 className="h-5 w-5 animate-spin" />
      <p className="text-sm">{label}</p>
    </div>
  );
}

export function EmptyState({ title, description }: { title: string; description?: string }) {
  return (
    <div className="flex min-h-32 flex-col items-center justify-center rounded-lg border border-dashed border-slate-200 bg-slate-50/70 p-6 text-center">
      <p className="text-sm font-medium text-slate-800">{title}</p>
      {description && <p className="mt-1 max-w-sm text-xs leading-5 text-slate-500">{description}</p>}
    </div>
  );
}

export function ErrorState({ title = "Something went wrong", message }: { title?: string; message?: string }) {
  return (
    <div className="rounded-lg border border-red-100 bg-red-50 p-4 text-red-700">
      <div className="flex items-start gap-2">
        <TriangleAlert className="mt-0.5 h-4 w-4 flex-shrink-0" />
        <div>
          <p className="text-sm font-medium">{title}</p>
          {message && <p className="mt-1 text-xs leading-5 text-red-600">{message}</p>}
        </div>
      </div>
    </div>
  );
}