"use client";

import TabNavigation from "./TabNavigation";
import OverviewTab from "./OverviewTab";
import { useApp } from "@/contexts/AppContext";
import { ProductDetail } from "@/lib/api/fundmarket";

interface ContentSectionProps {
  product: ProductDetail;
}

export default function ContentSection({ product }: ContentSectionProps) {
  const { t } = useApp();

  const tabs = [
    { id: "overview", label: t("tabs.overview") },
    { id: "asset-description", label: t("tabs.assetDescription") },
    { id: "performance-analysis", label: t("tabs.performanceAnalysis") },
    { id: "asset-custody", label: t("tabs.assetCustody") },
  ];

  const handleTabChange = (tabId: string) => {
    if (tabId !== "overview") {
      setTimeout(() => {
        document.getElementById(tabId)?.scrollIntoView({ behavior: "smooth", block: "start" });
      }, 100);
    }
  };

  return (
    <div className="flex flex-col gap-6 w-full">
      <TabNavigation
        tabs={tabs}
        defaultActiveId="overview"
        onTabChange={handleTabChange}
      />
      <OverviewTab product={product} />
    </div>
  );
}