"use client"
import { useState } from "react"
import { CustomTabs, TabItem } from "@/components/common/CustomTabs"
import { TabsContent } from "@/components/ui/tabs"
import { OverviewTab } from "./OverviewTab"
import { ServiceTab } from "./ServiceTab"
import { StylistTab } from "./StylistTab"
import { CustomerTab } from "./CustomerTab"
import { useTranslations } from "next-intl"

export function AnalyticsTab() {
  const [activeTab, setActiveTab] = useState("overview")
  const t = useTranslations()

  const tabItems: TabItem[] = [
    { value: "overview", label: t("analytics.tabs.overview") },
    { value: "service", label: t("analytics.tabs.service") },
    { value: "stylist", label: t("analytics.tabs.stylist") },
    // { value: "customer", label: t("analytics.tabs.customer") }
  ]

  return (
    <div className="w-full">
      <CustomTabs items={tabItems} activeValue={activeTab} onTabChange={setActiveTab}>
        <TabsContent value="overview">
          <OverviewTab />
        </TabsContent>
        <TabsContent value="service">
          <ServiceTab />
        </TabsContent>
        <TabsContent value="stylist">
          <StylistTab />
        </TabsContent>
        {/* <TabsContent value="customer">
          <CustomerTab />
        </TabsContent> */}
      </CustomTabs>
    </div>
  )
}