import { AlertTriangle, Inbox, RefreshCw } from "lucide-react";
import { Button } from "./Button";

export function Skeleton({ className = "" }) {
  return <div className={`animate-pulse rounded-md bg-line/60 ${className}`} />;
}

export function EmptyState({ title, text }) {
  return (
    <div className="rounded-lg border border-dashed border-line bg-surface p-10 text-center">
      <Inbox className="mx-auto mb-4 size-8 text-muted" />
      <h3 className="font-serif text-xl">{title}</h3>
      <p className="mx-auto mt-2 max-w-md text-sm text-muted">{text}</p>
    </div>
  );
}

export function ErrorState({ retry }) {
  return (
    <div className="rounded-lg border border-danger/25 bg-danger-soft p-8 text-center">
      <AlertTriangle className="mx-auto mb-3 size-7 text-danger" />
      <h3 className="font-semibold">Не удалось загрузить данные</h3>
      <p className="mt-1 text-sm text-muted">Проверьте соединение и попробуйте еще раз.</p>
      {retry && (
        <Button
          className="mt-4"
          variant="secondary"
          icon={<RefreshCw className="size-4" />}
          onClick={retry}
        >
          Повторить
        </Button>
      )}
    </div>
  );
}
