'use client';

import { JSX, useState } from 'react';

import Tabs from '@/components/Tabs';
import DailyMarketingReportContent from '@/components/pages/report/DailyMarketingReportContent';
import HppPerKandangTab from './sale/tab/HppPerKandangTab';

type MarketingReportTabType =
  | 'daily'
  | 'transaction'
  | 'hpp-comparison'
  | 'daily-hpp';

const marketingReportTabs: {
  id: MarketingReportTabType;
  label: string;
  content: JSX.Element;
}[] = [
  {
    id: 'daily',
    label: 'Penjualan Harian',
    content: <DailyMarketingReportContent />,
  },
  {
    id: 'daily-hpp',
    label: 'HPP Harian Kandang',
    content: <HppPerKandangTab />,
  },
];

const MarketingReportContent = () => {
  const [activeTab, setActiveTab] = useState<string>('daily');

  return (
    <section className='w-full max-w-7xl pb-16'>
      <Tabs
        activeTabId={activeTab}
        onTabChange={setActiveTab}
        tabs={marketingReportTabs}
        variant='lifted'
        className={{
          content: '-m-px pl-px',
        }}
      />
    </section>
  );
};

export default MarketingReportContent;