"use client";

import type { ReactNode } from "react";
import { Tabs } from "@heroui/react";
import { PRODUCT_DETAIL_SECTION_IDS } from "@/lib/product-detail/constants";

type ProductDetailTabsSectionProps = {
  descriptionContent: ReactNode;
  detailsContent: ReactNode;
  reviewsContent: ReactNode;
  reviewCount?: number;
};

/**
 * HeroUI Tabs for PDP content sections (Description, Details, Reviews).
 * Only the active panel is visible — tab labels serve as headings.
 */
export function ProductDetailTabsSection({
  descriptionContent,
  detailsContent,
  reviewsContent,
  reviewCount,
}: ProductDetailTabsSectionProps) {
  const reviewsLabel =
    reviewCount != null && reviewCount > 0
      ? `Reviews (${reviewCount})`
      : "Reviews";

  return (
    <div className="mt-8 md:mt-12">
      <Tabs
        variant="secondary"
        defaultSelectedKey={PRODUCT_DETAIL_SECTION_IDS.description}
        className="w-full"
      >
        <Tabs.ListContainer className="sticky top-0 z-10 bg-[var(--background)]">
          <Tabs.List aria-label="Product information sections">
            <Tabs.Tab id={PRODUCT_DETAIL_SECTION_IDS.description}>
              Description
              <Tabs.Indicator />
            </Tabs.Tab>
            <Tabs.Tab id={PRODUCT_DETAIL_SECTION_IDS.attributes}>
              Details
              <Tabs.Indicator />
            </Tabs.Tab>
            <Tabs.Tab id={PRODUCT_DETAIL_SECTION_IDS.reviews}>
              {reviewsLabel}
              <Tabs.Indicator />
            </Tabs.Tab>
          </Tabs.List>
        </Tabs.ListContainer>

        <Tabs.Panel
          id={PRODUCT_DETAIL_SECTION_IDS.description}
          className="py-6 md:py-8"
        >
          {descriptionContent}
        </Tabs.Panel>

        <Tabs.Panel
          id={PRODUCT_DETAIL_SECTION_IDS.attributes}
          className="py-6 md:py-8"
        >
          {detailsContent}
        </Tabs.Panel>

        <Tabs.Panel
          id={PRODUCT_DETAIL_SECTION_IDS.reviews}
          className="py-6 md:py-8"
        >
          {reviewsContent}
        </Tabs.Panel>
      </Tabs>
    </div>
  );
}
