"use client";

import { useState } from "react";
import ContractQuotationStep from "../_common/tabs/contract-quotation";
import SiteVisitStep from "../_common/tabs/site-visit";
import AgreementDocumentStep from "../_common/tabs/agreement-documents";
import LogsStep from "../_common/tabs/LogsStep";
import { TabHeader, TabContent, TabPanel, TabConfig } from "../_common/tab-components";

const tabs: TabConfig[] = [
  { id: "site-visit", label: "Site Visit Details" },
  { id: "quotation", label: "Contractor Quotation" },
  { id: "agreement", label: "Upload Agreement" },
  { id: "logs", label: "Logs" },
];

interface TabWiseComponentProps {
  defaultTab?: string;
  applicationId: string;
}

export default function TabWiseComponent({ defaultTab = "site-visit" , applicationId }: TabWiseComponentProps) {
  const [activeTab, setActiveTab] = useState(defaultTab);

  return (
    <div className="space-y-4">
      <TabHeader 
        tabs={tabs} 
        activeTab={activeTab} 
        onTabChange={setActiveTab} 
      />

      <TabContent>
        <TabPanel isActive={activeTab === "site-visit"}>
          <SiteVisitStep applicationId={applicationId} />
        </TabPanel>

        <TabPanel isActive={activeTab === "quotation"}>
          <ContractQuotationStep applicationId={parseInt(applicationId)} />
        </TabPanel>

        <TabPanel isActive={activeTab === "agreement"}>
          <AgreementDocumentStep applicationId={parseInt(applicationId)} />
        </TabPanel>

        <TabPanel isActive={activeTab === "logs"}>
          <LogsStep />
        </TabPanel>
      </TabContent>
    </div>
  );
}