"use client";

import { useRouter } from "next/navigation";
import {
  FaBook,
  FaChartLine,
  FaChevronRight,
  FaToolbox,
} from "react-icons/fa6";
import { Card, CardBody } from "@nextui-org/react";

import Button from "@/components/common/button";
import { INTERNAL_PAGES } from "@/constants/pages-mapping/internal-pages-mapping";

const RESOURCES_DATA = [
  {
    title: "Expert guides",
    description:
      "Dive into our comprehensive guides, offering expert insights and proven strategies to help you stay ahead in your industry. Each guide is designed to provide actionable advice and in-depth knowledge tailored to your professional needs.",
    icon: FaBook,
  },
  {
    title: "Essential tools",
    description:
      "Access our essential templates, checklists and other useful tools. These resources are designed to streamline your processes, ensuring efficiency and compliance in your research activities.",
    icon: FaToolbox,
  },
  {
    title: "Industry reports",
    description:
      "Stay informed with our in-depth industry reports, providing detailed analysis and insights into the latest trends and developments. Let us help you make data-driven decisions and stay competitive in your field.",
    icon: FaChartLine,
  },
];

function Resources() {
  const router = useRouter();

  const handleButtonClick = () => {
    router.push(INTERNAL_PAGES.client.resources);
  };

  const handleOnPress = () => {
    router.push(INTERNAL_PAGES.client.resources);
  };

  return (
    <section>
      <div className="flex flex-col lg:flex-row xxl:flex-col lg:justify-between justify-center text-center lg:text-start items-center px-12 lg:px-20 my-24">
        <h2 className="font-inter font-black text-3xl lg:text-7xl lg:max-w-2xl xxl:max-w-5xl">
          Resources for professionals
        </h2>
        <div className="space-y-4">
          <p className="font-noto text-xl lg:max-w-3xl xxl:max-w-5xl mt-4 xxl:text-center">
            Exclusive resources for industry professionals: comprehensive
            guides, real-world insights, essential tools, and in-depth reports
            to enhance your expertise and boost your research&apos;s success.
          </p>
          <div className="xxl:items-center xxl:justify-center xxl:flex xxl:w-96 xxl:mx-auto">
            <Button
              btnLabel="Access our resources area"
              customVariant="client"
              endContent={<FaChevronRight />}
              onClick={handleButtonClick}
            />
          </div>
        </div>
      </div>
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 xxxl:px-96 gap-6 mt-20 px-12 lg:px-20">
        {RESOURCES_DATA.map((resource, index) => {
          const Icon = resource.icon;

          return (
            <Card
              key={index}
              disableAnimation
              isHoverable
              isPressable
              className="p-4 bg-gray-400/10 dark:bg-white/5 rounded-xl flex flex-col items-center justify-center space-y-4 shadow-none"
              onPress={handleOnPress}
            >
              <CardBody className="p-6 space-y-3">
                <Icon className="text-2xl" />
                <h3 className="font-inter text-xl font-extrabold mb-2">
                  {resource.title}
                </h3>
                <p className="font-noto text-base text-gray-600 dark:text-white">
                  {resource.description}
                </p>
              </CardBody>
            </Card>
          );
        })}
      </div>
    </section>
  );
}

export default Resources;