"use client";

import { Card, CardBody, CardHeader } from "@nextui-org/react";
import {
  FaVideo,
  FaUtensils,
  FaTv,
  FaFlask,
  FaAngleRight,
} from "react-icons/fa6";
import { useRouter } from "next/navigation";

import Button from "@/components/common/button";
import { INTERNAL_PAGES } from "@/constants/pages-mapping/internal-pages-mapping";
import type { UserViewingContent } from "@/lib/user-viewing-ghost-content";

const OFFER_ICONS = [
  <FaVideo key="streaming" />,
  <FaUtensils key="catering" />,
  <FaTv key="viewing" />,
  <FaFlask key="labs" />,
];

function Pricing({ content }: { content: UserViewingContent["pricing"] }) {
  const router = useRouter();

  return (
    <section className="px-8 max-w-7xl mx-auto p-8 xl:p-0">
      <div className="h-full lg:h-96 py-16 lg:py-32 my-16 rounded-3xl w-full flex flex-col items-center justify-center bg-userViewingBlue dark:bg-paleBlue text-white dark:text-black">
        <div className="flex flex-col items-center text-center mx-2 justify-center space-y-8 px-8 lg:px-12">
          <h1 className="text-3xl xl:text-5xl font-inter font-black">
            {content.title}
          </h1>
          <p className="text-base xl:text-lg font-noto px-4 lg:px-0">
            {content.bookingCopy}
          </p>
          <span className="text-base xl:text-lg font-noto px-4 lg:px-0">
            {content.quotePrompt}
          </span>
          <Button
            btnLabel="Contact our studio manager"
            className="mt-8"
            customVariant="userViewing"
            endContent={<FaAngleRight />}
            variant="solid"
            onClick={() =>
              router.push(INTERNAL_PAGES.client.contactUs.homepage)
            }
          />
        </div>
      </div>
      <div className="flex flex-col text-center space-y-8">
        <div>
          <h3 className="text-3xl font-black font-inter mb-4 tracking-tight">
            {content.inclusionTitle}
          </h3>
          <p className="text-center font-noto text-lg">
            {content.inclusionCopy}
          </p>
        </div>
        <div>
          <h3 className="text-3xl font-black font-inter mb-4">
            {content.offersTitle}
          </h3>
          <div className="grid grid-cols-1 xl:grid-cols-2 xxl:grid-cols-4 gap-6 text-black">
            {content.offers.map((description, index) => (
              <Card
                key={index}
                className="light bg-gray-400/10 dark:bg-white/5 text-black dark:text-white rounded-xl p-4 flex flex-col justify-between shadow-none"
                isHoverable={false}
              >
                <CardHeader className="flex justify-center">
                  <div className="rounded-full bg-paleBlue dark:bg-midnightBlue size-8 text-black dark:text-white flex items-center justify-center p-1 outline-dashed outline-1 outline-offset-4 outline-paleBlue">
                    {OFFER_ICONS[index]}
                  </div>
                </CardHeader>
                <CardBody>
                  <p className="text-center font-noto">{description}</p>
                </CardBody>
              </Card>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

export default Pricing;