import { WifiOff } from "lucide-react";
import { Button } from "@/components/ui/button";

export type OfflineStateProps = {
  title?: string;
  description?: string;
  onRetry?: () => void;
};

export function OfflineState({
  title = "Sin conexion",
  description = "No pudimos conectar. Revisa tu red y vuelve a intentar.",
  onRetry
}: OfflineStateProps) {
  return (
    <div className="rounded-2xl border border-border/70 bg-card/70 p-6 text-center">
      <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-2xl bg-destructive/10 text-destructive">
        <WifiOff className="h-5 w-5" />
      </div>
      <h3 className="mt-4 text-lg font-semibold">{title}</h3>
      <p className="mt-2 text-sm text-muted-foreground">{description}</p>
      <Button className="mt-4" onClick={onRetry}>
        Reintentar
      </Button>
    </div>
  );
}