"use client";

import { Accordion, AccordionItem } from "@nextui-org/react";
import { JSX } from "react";
import {
  FcInspection,
  FcWebcam,
  FcConferenceCall,
  FcBusinessContact,
  FcCamcorderPro,
} from "react-icons/fc";

import type { UserViewingContent } from "@/lib/user-viewing-ghost-content";

const SERVICE_ICONS: JSX.Element[] = [
  <FcInspection key="usability" className="text-4xl" />,
  <FcWebcam key="streaming" className="text-4xl" />,
  <FcConferenceCall key="viewing" className="text-4xl" />,
  <FcBusinessContact key="interviews" className="text-4xl" />,
  <FcCamcorderPro key="recording" className="text-4xl" />,
];

function Services({ content }: { content: UserViewingContent["services"] }) {
  return (
    <section className="py-24 px-8" id="services">
      <div className="text-center space-y-4">
        <span className="relative font-noto text-xl font-bold">
          Services
          <span className="absolute -bottom-1 left-0 w-full h-1 bg-pfrBasicBlue opacity-40 dark:opacity-100"></span>
        </span>
        <h2 className="text-3xl lg:text-6xl font-inter font-black text-center mx-8">
          {content.title}
        </h2>
        <h3 className="text-lg font-noto text-center mx-8 xl:mx-12 pt-3 xl:px-0 xl:pt-0">
          {content.lead}
        </h3>
      </div>
      <div className="max-w-4xl m-auto p-4 bg-gray-400/10 dark:bg-white/5 rounded-xl mt-12 shadow-sm">
        <Accordion defaultExpandedKeys={["0"]}>
          {content.services.map((service, index) => (
            <AccordionItem
              key={index}
              classNames={{
                title:
                  "font-inter font-bold text-xl text-black dark:text-white",
                content: "font-noto text-lg my-4 text-black dark:text-white",
                subtitle: "font-noto text-base text-black dark:text-white",
              }}
              startContent={SERVICE_ICONS[index]}
              subtitle={service.subtitle}
              title={service.name}
            >
              <p className="font-noto">{service.description}</p>
            </AccordionItem>
          ))}
        </Accordion>
      </div>
    </section>
  );
}

export default Services;