"use client";

import React from "react";
import Image from "next/image";
import { capitalize } from "lodash";
import getSymbolFromCurrency from "currency-symbol-map";
import clsx from "clsx";
import Navbar from "@/components/Navbar";
import Link from "next/link";
import Footer from "@/components/Footer";
import translation from "@/translation/price.json";

type DurationUnit = "weeks" | "days" | "months" | "years";

interface Package {
  id: string;
  currency: string;
  duration: number;
  duration_unit: DurationUnit;
  price: number;
}

export default function Page({ language }: { language: "en" | "ar" }) {
  const [payments, setPayments] = React.useState<Package[]>([]);
  const getData = async () => {
    // Fetch data from external API
    const response = await fetch(
      `${process.env.NEXT_PUBLIC_APP_URL}/api/packages`,
      {
        method: "GET",
      }
    );

    if (response.status === 200) {
      const payments = await response.json();
      // Pass data to the page via props
      setPayments(payments);
      return;
    }
  };

  React.useEffect(() => {
    getData();
  }, []);
  return (
    <main className="h-screen w-full bg-white text-mti-black flex flex-col">
      <Navbar currentPage="/join" language="en" />

      <section className="w-full relative bg-white px-8 flex flex-col items-center text-center gap-4">
        <h2 className="text-3xl font-bold">{translation.title[language]}</h2>
        <div className="grid grid-cols-2 gap-8">
          {payments.map((p) => (
            <div
              key={p.id}
              className={clsx(
                "p-4 bg-white rounded-xl flex flex-col gap-6 items-start"
              )}
            >
              <div className="flex flex-col items-start mb-2">
                <Image
                  src="/logo_title.png"
                  alt="EnCoach's Logo"
                  width={32}
                  height={32}
                />
                <span className="font-semibold text-xl">
                  EnCoach - {p.duration}{" "}
                  {capitalize(
                    p.duration === 1
                      ? p.duration_unit.slice(0, p.duration_unit.length - 1)
                      : p.duration_unit
                  )}
                </span>
              </div>
              <div className="flex flex-col gap-2 items-start w-full">
                <span className="text-2xl">
                  {p.price}
                  {getSymbolFromCurrency(p.currency)}
                </span>
              </div>
              <div className="flex flex-col gap-1 items-start">
                <span>{translation.packageIncludes[language]}</span>
                <ul className="flex flex-col items-start text-sm">
                  <li>- {translation.packageIncludesA[language]}</li>
                  <li>- {translation.packageIncludesB[language]}</li>
                  <li>- {translation.packageIncludesC[language]}</li>
                </ul>
              </div>
            </div>
          ))}
        </div>
        <Link
          className="transition ease-in-out duration-300 text-white hover:bg-mti-purple-dark hover:border-mti-purple-dark border border-mti-purple-light bg-mti-purple-light px-8 py-2 rounded-xl mb-8"
          href={`${process.env.NEXT_PUBLIC_APP_URL}/register`}
        >
          {translation.joinus[language]}
        </Link>
      </section>
      <Footer language={language} />
    </main>
  );
}