"use client";

import Link from "next/link";
import { Card } from "@nextui-org/react";
import { FaClock } from "react-icons/fa";
import { FaChevronRight } from "react-icons/fa6";

import { LIST_OF_SERVICES } from "@/components/pages/client/services/services";
import type { ServicesGhostContent } from "@/lib/services-ghost-content";

function ServicesGrid({
  content,
}: {
  content: ServicesGhostContent["services"]["grid"];
}) {
  return (
    <div className="min-h-screen">
      <h2 className="font-inter font-black text-5xl lg:text-7xl px-12 lg:px-0 text-center">
        {content.title}
      </h2>
      <p className="font-noto text-xl text-center px-12 lg:px-0">
        {content.intro}
      </p>
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-1 max-w-7xl mx-auto mt-12">
        {LIST_OF_SERVICES.map((service, index) => {
          const Icon = service.icon;
          const card = content.cards[index];

          return (
            <Card
              key={index}
              className="shadow-none p-8 rounded light bg-gray-400/10 dark:bg-white/5"
            >
              <Icon className="text-3xl text-gray-600 dark:text-white mb-4" />
              <h2 className="text-lg font-inter font-bold mb-2 text-gray-800 dark:text-white">
                {card.title}
              </h2>
              <p className="mb-4 text-gray-700 dark:text-white font-noto text-base">
                {card.description}
              </p>
              <Link
                className="font-bold font-inter text-midnightBlue dark:text-pfrBasicBlue hover:underline"
                href={service.href}
              >
                Find out more
                <FaChevronRight className="inline ms-2" />
              </Link>
            </Card>
          );
        })}

        <Card className="shadow-none p-8 rounded light bg-gray-400/10 dark:bg-white/5">
          <div className="text-3xl text-gray-600 dark:text-white mb-4">
            <FaClock />
          </div>
          <h2 className="text-lg font-inter font-bold mb-2 text-gray-800 dark:text-white">
            {content.cards[11].title}
          </h2>
          <p className="mb-4 text-gray-700 dark:text-white font-noto text-base">
            {content.cards[11].description}
          </p>
          <span className="font-bold font-inter text-gray-500 dark:text-gray-400">
            Coming soon
          </span>
        </Card>
      </div>
    </div>
  );
}

export default ServicesGrid;