import { Loader2 } from "lucide-react";

export function FieldError({ id, children }: { id?: string; children?: React.ReactNode }) {
  if (!children) return null;
  return (
    <p id={id} className="mt-1 text-sm text-kiln-flame">
      {children}
    </p>
  );
}

export function FormSuccess({ children }: { children: React.ReactNode }) {
  return <div className="rounded-md border border-emerald-400/30 bg-emerald-500/10 p-3 text-sm text-emerald-100">{children}</div>;
}

export function FormError({ children }: { children: React.ReactNode }) {
  return <div className="rounded-md border border-kiln-ember/35 bg-kiln-ember/12 p-3 text-sm text-kiln-milk">{children}</div>;
}

export function LoadingState({ children = "Загрузка..." }: { children?: React.ReactNode }) {
  return (
    <div className="flex items-center gap-2 text-sm text-kiln-milk/72">
      <Loader2 className="animate-spin" size={18} />
      {children}
    </div>
  );
}

export function EmptyState({ title, text, action }: { title: string; text: string; action?: React.ReactNode }) {
  return (
    <div className="card grid min-h-[360px] place-items-center p-8 text-center">
      <div>
        <div className="mx-auto grid h-20 w-20 place-items-center rounded-full border border-kiln-ember/40 bg-kiln-ember/10 text-3xl">К</div>
        <h2 className="mt-5 text-3xl">{title}</h2>
        <p className="mx-auto mt-3 max-w-md muted">{text}</p>
        {action ? <div className="mt-6 flex justify-center">{action}</div> : null}
      </div>
    </div>
  );
}
