"use client";

import { Card, CardBody, CardFooter, CardHeader } from "@nextui-org/react";
import { FcApproval, FcInfo } from "react-icons/fc";

import { ServiceProvided } from "components/pages/client/services/services";

type ServicesProvidedProps = {
  servicesProvided: ServiceProvided;
};

function ServicesProvided({ servicesProvided }: ServicesProvidedProps) {
  const services = servicesProvided.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 mx-12 lg:mx-auto text-center">
        {servicesProvided.title}
      </h2>
      <div className="mx-auto px-6 lg:px-24">
        <div className="mt-8 grid grid-cols-1 mx-8 sm:mt-20 lg:mx-0 lg:max-w-none lg:grid-cols-2 gap-8">
          {services.map((service, index) => (
            <Card
              key={index}
              className="flex flex-col shadow-none justify-between rounded-lg bg-gray-400/10 dark:bg-white/5 text-black dark:text-white p-4 xl:p-10"
            >
              <CardHeader className="flex items-center justify-between gap-x-4 p-0">
                <h3 className="text-xl font-black font-inter">
                  {service.title}
                </h3>
              </CardHeader>
              <CardBody className="p-0 flex flex-col items-start">
                <p className="mt-4 text-base font-noto">
                  {service.description}
                </p>
                {service.options.map((option, idx) => (
                  <div
                    key={idx}
                    className="mt-6 font-noto flex flex-row items-center gap-x-2"
                  >
                    <div className="flex-shrink-0 w-5 h-5 text-green-500">
                      <FcApproval className="w-full h-full" />
                    </div>
                    <p>{option}</p>
                  </div>
                ))}
              </CardBody>
              <CardFooter className="p-0 flex flex-col items-start mt-8">
                {service.finalNote && (
                  <div className="mt-8 text-xs font-noto">
                    {Array.isArray(service.finalNote) ? (
                      service.finalNote.map((note, idx) => (
                        <p key={idx} className="mt-2">
                          {note}
                        </p>
                      ))
                    ) : (
                      <p>{service.finalNote}</p>
                    )}
                  </div>
                )}
                {service.aboutThisOption && (
                  <h4 className="text-base underline font-semibold font-inter">
                    {service.aboutThisOption.title}
                  </h4>
                )}
                {service.aboutThisOption &&
                  service.aboutThisOption.description.map((option, idx) => (
                    <ul
                      key={idx}
                      className="mt-6 font-noto flex flex-row items-start gap-x-2"
                    >
                      <div className="flex-shrink-0 w-5 h-5 text-green-500">
                        <FcInfo className="w-full h-full" />
                      </div>
                      {option}
                    </ul>
                  ))}
              </CardFooter>
            </Card>
          ))}
        </div>
        {servicesProvided.closureNote && (
          <div className="mt-8 text-center font-noto text-xl">
            {servicesProvided.closureNote}
          </div>
        )}
      </div>
    </section>
  );
}

export default ServicesProvided;