"use client";

import { Card, CardBody } from "@nextui-org/react";

import { SectionContent } from "@/components/pages/client/services/services";

type WhatElseWeCanDoProps = {
  whatElseWeCanDo: SectionContent;
};

function WhatElseWeCanDo({ whatElseWeCanDo }: WhatElseWeCanDoProps) {
  const features = whatElseWeCanDo.content;

  return (
    <section className="my-24 min-h-screen">
      <h2 className="text-3xl md:text-6xl font-black font-inter mb-8 max-w-5xl px-12 lg:px-0 text-center lg:text-start lg:ps-12">
        {whatElseWeCanDo.title}
      </h2>
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 my-12 w-full px-12 lg:px-32">
        {features.map((value, index) => {
          const Icon = value.icon;

          return (
            <Card
              key={index}
              className="flex flex-row shadow-none rounded-lg bg-gray-400/10 dark:bg-white/5 text-black dark:text-white p-4 light"
            >
              <CardBody className="flex flex-col gap-4 lg:gap-0 lg:grid lg:grid-cols-4">
                <div className="lg:col-span-1 m-auto">
                  <Icon className="" size={32} />
                </div>
                <div className="lg:col-span-3 flex flex-col space-y-4">
                  <h3 className="text-xl font-bold font-inter text-center lg:text-start">
                    {value.title}
                  </h3>
                  <p className="text-lg font-medium font-noto text-center lg:text-start">
                    {value.description}
                  </p>
                </div>
              </CardBody>
            </Card>
          );
        })}
      </div>
    </section>
  );
}

export default WhatElseWeCanDo;