"use client";
import { useCartillaStore } from "@/store/cartilla-store";
import { CartillaForm, CartillaResults } from "@/components/cartilla";
import { AnimatePresence } from "motion/react";
import useCartillaResults from "@/components/cartilla/hooks/useCartillaResults";

const CartillaContent = () => {
  const { rubro, filtros } = useCartillaStore();
  const { data, isFetching, refetch, error } = useCartillaResults(filtros, rubro?.value ?? "");
  if (!rubro) return null;
  const allFiltersReady = Object.values(filtros).every((el) => el !== "");

  return (
    <>
      <CartillaForm rubro={rubro} loadingResults={isFetching} refetchResults={refetch} />
      <AnimatePresence>
        {allFiltersReady && (
          <CartillaResults filtros={filtros} results={data!} error={error} loadingResults={isFetching} />
        )}
      </AnimatePresence>
    </>
  );
};

export default CartillaContent;