import { Building2, BriefcaseBusiness, UsersRound, UserRoundCheck } from "lucide-react";

import ProductSectionHeading from "@/components/products/ProductSectionHeading";
import { productThemes } from "@/components/products/product-theme";
import type { Product, ProductPageCopy } from "@/data/products.data";

const audienceIcons = [Building2, BriefcaseBusiness, UsersRound, UserRoundCheck];

export default function ProductAudience({ copy, product }: { copy: ProductPageCopy; product: Product }) {
  const theme = productThemes[product.tone];
  return (
    <section className="border-y border-[#edf0f6] bg-[#fbfdff] py-16">
      <div className="mx-auto max-w-[1360px] px-6 xl:px-8">
        <ProductSectionHeading centered eyebrow={copy.audienceEyebrow} title={copy.audienceTitle} tone={product.tone} />
        <div className="mt-8 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
          {product.who.map((item, index) => {
            const Icon = audienceIcons[index] ?? UsersRound;
            return (
              <article key={item} className="rounded-[20px] border border-[#e6eaf3] bg-white p-5 text-center shadow-[0_6px_18px_rgba(45,61,108,0.04)]">
                <span className={`mx-auto grid h-11 w-11 place-items-center rounded-xl ${theme.icon}`}><Icon size={20} /></span>
                <h3 className="mt-4 text-[14px] font-extrabold text-[#303b59]">{item}</h3>
              </article>
            );
          })}
        </div>
      </div>
    </section>
  );
}