import { notFound } from "next/navigation";
import Header from "@/components/Header";
import Footer from "@/components/Footer";
import DetailBanner from "@/components/DetailBanner";
import ArticleBody from "@/components/ArticleBody";
import ShareLikeActions from "@/components/ShareLikeActions";
import PortfolioGallery from "@/components/PortfolioGallery";
import {
  getAllBusinessSlugs,
  getBusinessBySlug,
  getBusinessPortfolio,
} from "@/data/business";
import styles from "./portfolio.module.css";

export function generateStaticParams() {
  return getAllBusinessSlugs().flatMap((slug) => {
    const business = getBusinessBySlug(slug);
    return (business?.portfolios ?? []).map((item) => ({
      slug,
      portfolioSlug: item.slug,
    }));
  });
}

export async function generateMetadata({
  params,
}: {
  params: Promise<{ slug: string; portfolioSlug: string }>;
}) {
  const { slug, portfolioSlug } = await params;
  const data = getBusinessPortfolio(slug, portfolioSlug);
  if (!data) return { title: "Portfolios details | IranBay" };
  return {
    title: `${data.portfolio.title} | Portfolios details | IranBay`,
    description: data.portfolio.description,
  };
}

export default async function PortfolioDetailPage({
  params,
}: {
  params: Promise<{ slug: string; portfolioSlug: string }>;
}) {
  const { slug, portfolioSlug } = await params;
  const data = getBusinessPortfolio(slug, portfolioSlug);
  if (!data) notFound();

  const { business, portfolio } = data;

  return (
    <div className={styles.page}>
      <Header />
      <main className={styles.shell}>
        <DetailBanner
          title="Portfolios details"
          breadcrumbs={business.breadcrumbs}
        />

        <div className={styles.layout}>
          <PortfolioGallery images={portfolio.images} />

          <div className={styles.copy}>
            <div className={styles.meta}>
              <span>
                <img src="/images/icons/calendar.svg" alt="" />
                {portfolio.date}
              </span>
              <span>
                <img src="/images/icons/user.svg" alt="" />
                {portfolio.author}
              </span>
              <span>
                <img src="/images/icons/category.svg" alt="" />
                {portfolio.category}
              </span>
            </div>
            <h2 className={styles.title}>{portfolio.title}.</h2>
            <p className={styles.intro}>{portfolio.description}</p>
            <hr className={styles.rule} />
            <div className={styles.bodyWrap}>
              <ArticleBody blocks={portfolio.body} />
            </div>
            <div className={styles.actions}>
              <ShareLikeActions />
            </div>
          </div>
        </div>
      </main>
      <Footer />
    </div>
  );
}