"use client";

import Link from "next/link";
import {
  BusinessListHeader,
  BusinessMeshkeeGate,
} 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 BusinessProductsPage() {
  return (
    <BusinessMeshkeeGate>
      {(meshkeeId) => (
        <>
          <BusinessListHeader
            title={en.products.title}
            lead={en.products.lead}
            action={
              <>
                <Link
                  href="/products/categories"
                  className={`outline-btn ${styles.actionBtn}`}
                >
                  {en.products.manageCategories}
                </Link>
                <Link
                  href="/products/new"
                  className={`outline-btn ${styles.actionBtn}`}
                >
                  {en.products.add}
                </Link>
              </>
            }
          />
          <ProductsPanel
            meshkeeId={meshkeeId}
            emptyLabel={en.products.empty}
            addHref="/products/new"
          />
        </>
      )}
    </BusinessMeshkeeGate>
  );
}