'use client';

import { useState } from 'react';
import Tabs from '@/components/Tabs';
import PurchasesPerSupplierTab from '@/components/pages/report/logistic-stock/tab/PurchasesPerSupplierTab';
import { useLogisticStockTabStore } from '@/stores/report/logistic-stock-tab/logistic-stock-tab.store';

const LogisticStockTabs = () => {
  const [activeTabId, setActiveTabId] = useState<string>('1');
  const tabActions = useLogisticStockTabStore((state) => state.tabActions);

  const tabs = [
    {
      id: '1',
      label: 'Rekapitulasi Pembelian Per Supplier',
      content: <PurchasesPerSupplierTab tabId='1' />,
    },
    // {
    //   id: '2',
    //   label: 'Rekapitulasi Pemakaian Barang',
    //   content: 'Rekapitulasi Pemakaian Barang Tab',
    // },
    // {
    //   id: '3',
    //   label: 'Rekapitulasi Stock Persediaan Barang',
    //   content: 'Rekapitulasi Stock Persediaan Barang Tab',
    // },
  ];

  return (
    <section className='w-full'>
      <Tabs
        tabs={tabs}
        variant='boxed'
        activeTabId={activeTabId}
        onTabChange={setActiveTabId}
        className={{
          tabHeaderWrapper:
            'justify-between items-center p-3 border-b border-base-content/10',
          tab: 'w-fit',
          content: 'p-0 m-0',
        }}
        sideContent={tabActions[activeTabId] || null}
      />
    </section>
  );
};

export default LogisticStockTabs;