"use client";

import HeroWithCardsSection from "./HeroWithCardsSection";

interface TeamSectionProps {
  title?: string;
  description?: string;
  bulletPointsTitle?: string;
  bulletPoints?: string[][];
  cards?: {
    id: string;
    svg?: string;
    title: string;
    "sub-title"?: string;
  }[];
  backgroundImageMobile?: string;
  backgroundImageDesktop?: string;
}

export default function TeamSection({ title, description, bulletPointsTitle, bulletPoints, cards, backgroundImageMobile, backgroundImageDesktop }: TeamSectionProps) {
    if (!title && !description && (!cards || cards.length === 0)) return null;

    const mappedCards = cards?.map(card => ({
        id: card.id,
        icon: card.svg ? <div dangerouslySetInnerHTML={{ __html: card.svg! }} /> : undefined,
        label: card.title,
        subtitle: card["sub-title"]
    }));


    return (
        <HeroWithCardsSection
            title={title ? (
              <span dangerouslySetInnerHTML={{ __html: title.replace('Team', '<span class="font-medium">Team</span>') }} />
            ) : undefined}
            description={description || ""}
            bulletPointsTitle={bulletPointsTitle}
            bulletPoints={bulletPoints}
            cards={mappedCards as any || []}
            cardsPerRow={4}
            cardWidth="280px"
            cardHeight="220px"
            showNavigation={true}
            backgroundImageMobile={backgroundImageMobile}
            backgroundImageDesktop={backgroundImageDesktop}
        />
    );
}