"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(`https://platform.encoach.com/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>
	);
}
