"use client";
import { Link } from "react-router-dom";
import { useTranslation } from "react-i18next";
import Breadcrumb from "@/ui/breadcrumb";

import { TitleAndDescription } from "@/types";
import { Button } from "@/components/ui/button";
import {
    Airplay, Award, Bot, GraduationCap, HandCoins, ListRestart,
    Lock, MonitorCog, SquareStack, UserCheck, Users
} from "lucide-react";

export default function IvoryDiploma() {
    const { t } = useTranslation();
    const whyIvory = t('diploma.whyIvory', { returnObjects: true }) as TitleAndDescription[];
    const whyIvoryIcons = [<Airplay />, <ListRestart />, <HandCoins />, <Award />, <GraduationCap />, <UserCheck />];

    const diplomas = t('diploma.diplomas', { returnObjects: true }) as TitleAndDescription[];
    const diplomasLinks = [
        "/ivory-diploma/cyber-security",
        "/ivory-diploma/ai",
        "/ivory-diploma/executive-management",
        "/ivory-diploma/hr",
        "/ivory-diploma/logistics-management",
    ];
    const diplomasIcons = [<Lock />, <Bot />, <SquareStack />, <Users />, <MonitorCog />];

    return (
        <>
            <Breadcrumb pages={[t('routes.diploma')]} />
            <div className="layout mt-8 max-lg:mb-4">
                <section className="relative border rounded-lg text-start px-3 py-10">
                    <div className="flex justify-center items-center">
                        <div className="absolute -top-4 bg-primary-tw text-white w-9/12 !py-3 rounded-xl text-center">
                            <p className="text-xl">
                                {t('diploma.header')}
                            </p>
                            <p className="text-sm mt-2">
                                {t('diploma.header-desc')}
                            </p>
                        </div>
                    </div>
                    <div className="mt-10 p-4 lg:px-12">
                        <article className="text-justify text-gray-600">
                            {t('diploma.desc')}.
                        </article>
                    </div>
                    <div className="grid place-items-center">
                        <Button variant="outline" className="bg-secondary-tw absolute -bottom-4 text-white w-36 cursor-text">
                            {t('diploma.start-now')}
                        </Button>
                    </div>
                </section>
            </div>

            <div className="bg-light-gray py-4 layout">
                <div className="grid place-items-center">
                    <h2 className="services-header grid place-items-center after:-bottom-2 after:w-24">
                        {t('about.why')}
                    </h2>
                </div>
                <div className="grid gap-8 lg:grid-cols-2 xl:grid-cols-3 my-8">
                    {
                        whyIvory.map((item, i) => (
                            <div key={i} className="relative border-2 rounded-lg p-4">
                                <div className="grid place-items-center">
                                    <div className="absolute -top-5 bg-secondary-tw rounded-full size-10 grid place-items-center text-white">
                                        {whyIvoryIcons[i]}
                                    </div>
                                </div>
                                <div className="text-center my-4">
                                    <p>
                                        {item.title}
                                    </p>
                                    <span className="text-sm text-gray-500">
                                        {item.desc}
                                    </span>
                                </div>
                            </div>
                        ))
                    }
                </div>
            </div>

            <div className="layout">
                <div className="grid place-items-center">
                    <h2 className="services-header grid place-items-center after:-bottom-2 after:w-24">
                        {t('routes.diploma')}
                    </h2>
                </div>
                <div className="grid gap-8 lg:grid-cols-2 xl:grid-cols-5 mt-8">
                    {
                        diplomas.map((item, i) => (
                            <Link to={diplomasLinks[i]} key={i} className="relative border-2 rounded-lg p-4 bg-secondary-tw text-white">
                                <div className="grid place-items-center">
                                    <div className="absolute -top-5 bg-secondary-tw border border-white rounded-full size-10 grid place-items-center text-white">
                                        {diplomasIcons[i]}
                                    </div>
                                </div>
                                <div className="text-center my-4">
                                    <p>
                                        {item.title}
                                    </p>
                                    <span className="text-sm text-gray-100">
                                        {item.desc}
                                    </span>
                                </div>
                            </Link>
                        ))
                    }
                </div>
            </div>
        </>
    )
}