import { useGetAllOrdersQuery } from '@/app/backend/endpoints/orders';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import SchoolsOrders from './SchoolsOrders';
import TeachersOrders from './TeachersOrders';
import useTitle from '@/hooks/useTitle';

export default function Orders() {
  useTitle('Orders');
  const {
    data: dataWrap,
    isLoading,
    isError,
    isFetching,
  } = useGetAllOrdersQuery();
  const data = dataWrap?.data;
  return (
    <section>
      <Tabs defaultValue="schools" className="flex flex-col items-center ">
        <TabsList className="flex justify-center w-fit">
          <TabsTrigger value="schools" className="font-semibold">
            Schools
          </TabsTrigger>
          <TabsTrigger value="teachers" className="font-semibold">
            Teachers
          </TabsTrigger>
        </TabsList>
        <TabsContent value="schools" className="w-full">
          <SchoolsOrders
            data={data?.schoolOrders || []}
            isLoading={isLoading}
            isError={isError}
            isFetching={isFetching}
          />
        </TabsContent>
        <TabsContent value="teachers" className="w-full">
          <TeachersOrders
            data={data?.teacherOrders || []}
            isLoading={isLoading}
            isError={isError}
            isFetching={isFetching}
          />
        </TabsContent>
      </Tabs>
    </section>
  );
}