/**
 * Product detail page (PDP) — section IDs and shared types.
 * Single source of truth for anchor links and DOM ids.
 *
 * Convention: section components receive only the data they need (no giant
 * "product" object). Shared data fetching (product by slug) is done at page
 * or layout level; sections are presentational or consume a slice of that data.
 */

export const PRODUCT_DETAIL_SECTION_IDS = {
  hero: "pdp-hero",
  description: "pdp-description",
  attributes: "pdp-attributes",
  reviews: "pdp-reviews",
  related: "pdp-related",
} as const;

export type ProductDetailSectionId =
  (typeof PRODUCT_DETAIL_SECTION_IDS)[keyof typeof PRODUCT_DETAIL_SECTION_IDS];

/** Params for /shop/[category]/[subCategory]/[slug] — use this type for page and components. */
export type ProductDetailParams = {
  category: string;
  subCategory: string;
  slug: string;
};

/** Build PDP path for links (e.g. product cards). */
export function getProductDetailPath(
  category: string,
  subCategory: string,
  slug: string,
): string {
  return `/shop/${category}/${subCategory}/${slug}`;
}

/**
 * Breadcrumb data shape for PDP: Home → Shop → [Category] → [Subcategory] → Product.
 * Use with ShopBreadcrumbBar: pass items where the last has no href (current page, aria-current="page").
 */

function formatCategoryLabel(slug: string): string {
  if (slug === "other-pets") return "Other Pets";
  return slug.charAt(0).toUpperCase() + slug.slice(1);
}

/** Build PDP breadcrumb items: Home → Shop → Category → Subcategory → Product (current, no href). */
export function getProductDetailBreadcrumbItems(params: {
  categorySlug: string;
  subCategorySlug: string;
  subCategoryName: string;
  productName: string;
}): Array<{ label: string; href?: string }> {
  const { categorySlug, subCategorySlug, subCategoryName, productName } = params;
  return [
    { label: "Home", href: "/" },
    { label: "Shop", href: "/shop" },
    { label: formatCategoryLabel(categorySlug), href: `/shop/${categorySlug}` },
    {
      label: subCategoryName,
      href: `/shop/${categorySlug}/${subCategorySlug}`,
    },
    { label: productName },
  ];
}
