"use client";

import dynamic from "next/dynamic";
import { FaBus, FaCar, FaTrain } from "react-icons/fa6";

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

const DynamicMapComponent = dynamic(
  () => import("@/components/pages/client/user-viewing/common/map-component"),
  { ssr: false },
);

type TransportOption = {
  icon: any;
};

const TRANSPORT_OPTIONS: TransportOption[] = [
  {
    icon: FaTrain,
  },
  {
    icon: FaBus,
  },
  {
    icon: FaCar,
  },
];

function TransportCard({
  transport,
}: Pick<UserViewingContent["location"], "transport">) {
  return (
    <div className="grid grid-cols-1 md:grid-cols-3 gap-4 px-12 text-black">
      {TRANSPORT_OPTIONS.map((option, index) => (
        <div
          key={index}
          className="flex items-center justify-center text-base font-noto space-y-4 flex-col rounded-2xl bg-gray-400/10 dark:bg-white/5 p-4 shadow-none text-black dark:text-white"
        >
          <div className="flex items-center justify-center rounded-full p-2 bg-paleBlue dark:bg-midnightBlue size-10 outline-dashed outline-1 outline-offset-4 outline-midnightBlue">
            <option.icon className="text-black dark:text-white size-6" />
          </div>
          <p className="text-sm font-noto text-center">{transport[index]}</p>
        </div>
      ))}
    </div>
  );
}

function Location({ content }: { content: UserViewingContent["location"] }) {
  return (
    <section className="text-black dark:text-white text-center xl:text-start max-w-7xl mx-auto p-8 xl:p-0 space-y-12">
      <div className="text-center space-y-4">
        <span className="relative font-noto text-xl font-bold">
          Location
          <span className="absolute -bottom-1 left-0 w-full h-1 bg-pfrBasicBlue opacity-40 dark:opacity-100"></span>
        </span>
        <h2 className="text-4xl xl:text-6xl font-inter font-black">
          {content.title}
        </h2>
      </div>
      <div className="flex flex-col top-0  z-0">
        <DynamicMapComponent />
        <div className="flex flex-col text-center xl:text-start px-4 pt-4 xl:px-12 xl:pt-8 space-y-3">
          <p className="font-noto text-xl font-bold">{content.venueName}</p>
          <p className="font-noto text-base font-bold">{content.address}</p>
          <p className="font-noto mb-4 xl:pb-0">{content.intro}</p>
          <TransportCard transport={content.transport} />
        </div>
      </div>
      <p className="font-noto text-base lg:text-lg px-12 text-center">
        {content.visitCopy}
      </p>
    </section>
  );
}

export default Location;