"use client";

import React from "react";
import HeroWithCardsSection, { CardItem } from "./HeroWithCardsSection";

function createSvgIcon(svg: string) {
  return function SvgIcon() {
    return (
      <div
        dangerouslySetInnerHTML={{ __html: svg }}
      />
    );
  };
}

export type WasteCategoriesSectionData = {
  title: string;
  description: string;
  cards: { id: string; svg: string; title: string }[];
  bgImageDesktop?: string;
  bgImageMobile?: string;
};

export interface WasteCategoriesSectionProps {
  data?: WasteCategoriesSectionData | null;
}

const WasteCategoriesSection: React.FC<WasteCategoriesSectionProps> = ({ data }) => {
  const title = data?.title ?? "";
  const description = data?.description ?? "";
  const backgroundImageDesktop = data?.bgImageDesktop ?? "";
  const backgroundImageMobile = data?.bgImageMobile ?? "";
  const cards: CardItem[] = (data?.cards ?? []).map((item) => ({
    id: item.id,
    icon: createSvgIcon(item.svg),
    label: item.title,
  }));

  return (
    <HeroWithCardsSection
      title={title}
      description={description}
      cards={cards}
      cardsPerRow={5}
      cardWidth="240px"
      cardHeight="219px"
      showNavigation={true}
      backgroundImageDesktop={backgroundImageDesktop}
      backgroundImageMobile={backgroundImageMobile}
    />
  );
};

export default WasteCategoriesSection;