"use client";

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

export default function ManageBusinessPortfoliosPage() {
  const params = useParams<{ meshkeeId: string }>();
  const meshkeeId = String(params.meshkeeId ?? "");
  const addHref = `/manage/${encodeURIComponent(meshkeeId)}/portfolios/new`;

  return (
    <>
      <BusinessListHeader
        title={en.portfolios.title}
        lead={en.portfolios.lead}
        action={
          <Link href={addHref} className={`outline-btn ${styles.actionBtn}`}>
            {en.portfolios.add}
          </Link>
        }
      />
      <PortfoliosPanel
        meshkeeId={meshkeeId}
        emptyLabel={en.portfolios.empty}
        addHref={addHref}
      />
    </>
  );
}