import { getImageUrl } from '@/utils/getImageUrl';
import { LightbulbIcon } from '@phosphor-icons/react';

export type WhyChooseUsProps = {
  title: string;
  subtitle: string;
  cards: {
    icon?: string;
    description: string;
  }[];
};

export default function WhyChooseUsSection({
  title,
  subtitle,
  cards,
}: WhyChooseUsProps) {
  return (
    <section className="bg-white py-12 font-inter md:py-28">
      <div className="container px-4 md:px-28">
        <h2 className="mb-6 text-center font-poppins text-2xl font-bold text-[#23262F] md:text-[40px]">
          {title}
        </h2>
        <p className="mx-auto mb-12 max-w-xl text-center text-lg leading-8 font-normal text-[#353945]">
          {subtitle}
        </p>
        <div className="flex flex-wrap items-start gap-6 px-4 md:px-40">
          {cards?.map((card, i) => (
            <div
              key={i}
              className="flex w-full flex-col items-center justify-center gap-2.5 rounded-xl bg-[#8c45ff]/10 px-8 py-5"
            >
              <div className="flex size-12 items-center justify-center rounded-full bg-[#8c45ff]">
                {card.icon ? (
                  <img
                    src={getImageUrl(card.icon)}
                    alt=""
                    className="h-6 w-6 object-contain"
                  />
                ) : (
                  <LightbulbIcon
                    size={30}
                    weight="duotone"
                    className="text-white"
                  />
                )}
              </div>
              <p className="w-full text-center font-medium text-[#353945]">
                {card.description}
              </p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}