import { useQuery } from "@tanstack/react-query";
import { RequiredDataGuard } from "../common/RequiredDataGuard";
import { Typography } from "antd";

// En tu componente StockTab.jsx:
export function StockTab() {
  const { data: sucursales } = useQuery({ queryKey: ["sucursales"] });
  const { data: depositos } = useQuery({ queryKey: ["depositos"] });

  const hasRequiredData = sucursales?.length > 0 && depositos?.length > 0;

  return (
    <RequiredDataGuard
      hasRequiredData={hasRequiredData}
      title="Configuración requerida"
      message="Necesitas crear al menos una Sucursal y un Depósito para gestionar el stock."
      buttonText="Ir a Configuración"
      buttonRoute="/configuracion"
    >
      {/* Aquí va todo tu contenido de Stock */}
      <Typography variant="h6">Gestión de Stock</Typography>
      {/* ... resto de tu UI ... */}
    </RequiredDataGuard>
  );
}