export function LoadingState({ label = "Loading…" }: { label?: string }) {
  return (
    <div className="flex flex-col items-center justify-center rounded-2xl border border-border bg-card p-10 text-center shadow-soft">
      <div className="h-10 w-10 animate-spin rounded-full border-2 border-[var(--gold)]/30 border-t-[var(--gold)]" />
      <p className="mt-4 text-sm text-muted-foreground">{label}</p>
    </div>
  );
}

export function EmptyState({
  title = "Nothing here yet",
  message = "We couldn't find a devotional for that yet. Try another topic or verse.",
}: {
  title?: string;
  message?: string;
}) {
  return (
    <div className="rounded-2xl border border-dashed border-border bg-card/60 p-10 text-center">
      <h3 className="font-serif text-xl font-semibold text-primary">{title}</h3>
      <p className="mt-2 text-sm text-muted-foreground">{message}</p>
    </div>
  );
}

export function ErrorState({ message }: { message?: string }) {
  return (
    <div className="rounded-2xl border border-destructive/30 bg-destructive/5 p-6 text-center">
      <p className="text-sm text-destructive">
        {message ?? "Something went wrong loading this content. Please try again."}
      </p>
    </div>
  );
}