"use client";

import Link from "next/link";
import { useParams } from "next/navigation";
import { BusinessListHeader } from "@/components/business/BusinessPageChrome";
import ProductsPanel from "@/components/catalog/ProductsPanel";
import { en } from "@/lib/i18n/en";
import styles from "@/components/BusinessDetailsPage.module.css";

export default function ManageBusinessProductsPage() {
  const params = useParams<{ meshkeeId: string }>();
  const meshkeeId = String(params.meshkeeId ?? "");
  const base = `/manage/${encodeURIComponent(meshkeeId)}/products`;

  return (
    <>
      <BusinessListHeader
        title={en.products.title}
        lead={en.products.lead}
        action={
          <>
            <Link
              href={`${base}/categories`}
              className={`outline-btn ${styles.actionBtn}`}
            >
              {en.products.manageCategories}
            </Link>
            <Link href={`${base}/new`} className={`outline-btn ${styles.actionBtn}`}>
              {en.products.add}
            </Link>
          </>
        }
      />
      <ProductsPanel
        meshkeeId={meshkeeId}
        emptyLabel={en.products.empty}
        addHref={`${base}/new`}
      />
    </>
  );
}