"use client";
import useHomeSection from "@/hooks/use-home-section";
import { useTranslation } from "react-i18next";

import icon1 from "@/assets/used-icons/about-1.svg";
import icon2 from "@/assets/used-icons/about-2.svg";
import icon3 from "@/assets/used-icons/about-3.svg";
import icon4 from "@/assets/used-icons/about-4.svg";
import { CountUpOnView } from "@/ui/count-up";
import { Button } from "@/components/ui/button";
import { RefreshCcw } from "lucide-react";

export default function IvoryNumbers() {
    const { data: ivoryNumbers, error, isLoading, refetch } = useHomeSection({ sectionName: 'ivory_numbers' });
    const { t } = useTranslation();
    const icons = [icon4, icon3, icon2, icon1];

    if (error) {
        return (
            <div className="text-center py-8 flex flex-col gap-4 layout">
                <p className="text-red-500">{t('custom.err')}</p>
                <div className="grid place-items-center">
                    <Button
                        variant="outline"
                        className="mt-2 bg-secondary-tw text-white px-4 py-2 rounded-md"
                        onClick={() => refetch && refetch()}
                    >
                        {t('custom.try-again')} <RefreshCcw />
                    </Button>
                </div>
            </div>
        )
    };

    if (isLoading) {
        return (
            <div className="grid grid-cols-2 w-full gap-4 xl:grid-cols-4 lg:gap-8 layout">
                {
                    [...Array(4)].map((_, i) => (
                        <div key={i} className="l-load w-full rounded-md h-20"></div>
                    ))
                }
            </div>
        )
    };

    return (
        <section className="bg-primary-tw">
            <div className="w-full flex justify-center">
                <h2 className="services-header !text-white after:w-16 font-thin flex justify-center after:-bottom-2 ">
                    {t('home.ivory-numbers')}
                </h2>
            </div>
            <section className="!pb-8 pt-4 grid grid-cols-2 xl:grid-cols-4 gap-8 xl:px-12">
                {
                    ivoryNumbers?.map((item, i: number) => (
                        <div key={i} className="grid place-items-center text-white gap-2">
                            <div className="h-14">
                                <img src={icons[i]} alt={item?.title} className="h-full" />
                            </div>
                            <div className="text-center">
                                <div className="text-xl text-secondary-tw font-semibold">
                                    <CountUpOnView end={Number(item?.sub_title)} />
                                </div>
                                <p className="text-nowrap">{item?.title}</p>
                            </div>
                        </div>
                    ))
                }
            </section>
        </section>
    )
}