"use client";

import { useState, useEffect } from "react";
import EquipmentSearch from "./EquipmentSearch";
import EquipmentSearchLoading from "./EquipmentSearchLoading";
import EquipmentTabs from "@/app/(main)/settings/equipment/EquipmentTabs";
import { useSearchParams } from "next/navigation";

interface SubComponents {
  Loading: typeof EquipmentSearchLoading;
}

const EquipmentSearchWrapper: React.FC & SubComponents = () => {
  const searchParams = useSearchParams();
  const tabFromUrl = searchParams.get("tab");
  const initialTabIndex = tabFromUrl ? parseInt(tabFromUrl, 10) : 0;
  const [tabIndex, setTabIndex] = useState(initialTabIndex);

  useEffect(() => {
    const tabFromUrl = searchParams.get("tab");
    const newTabIndex = tabFromUrl ? parseInt(tabFromUrl, 10) : 0;
    setTabIndex(newTabIndex);
  }, [searchParams]);

  return (
    <>
      <EquipmentTabs onTabChange={setTabIndex} />
      <EquipmentSearch equipments={[]} tabIndex={tabIndex} />
    </>
  );
};

EquipmentSearchWrapper.Loading = EquipmentSearchLoading;

export default EquipmentSearchWrapper;