import { useTranslations } from 'next-intl';
import { useRouter } from 'next/router';
import React from 'react'
import CountUp from 'react-countup';

// Function to convert numbers to Arabic numerals
const toArabicNumerals = (num) => {
    const arabicNumbers = ['٠', '١', '٢', '٣', '٤', '٥', '٦', '٧', '٨', '٩'];
    return num.toString().split('').map(digit => arabicNumbers[parseInt(digit, 10)]).join('');
};

const FunFact = (props) => {
    const { locale } = useRouter();
    const t = useTranslations("Counter");
    const funFact = [
        {
            title: t("title1"),
            subTitle: t("subTitle1"),
            Symbol: t("Symbol1"),
        },
        {
            title: t("title2"),
            subTitle: t("subTitle2"),
            Symbol: t("Symbol2"),
        },
        {
            title: t("title3"),
            subTitle: t("subTitle3"),
            Symbol: t("Symbol3"),
        },
        {
            title: t("title4"),
            subTitle: t("subTitle4"),
            Symbol: t("Symbol4"),
        },
    ];

    return (
        <section className={`wpo-fun-fact-section content ${props.fnClass}`}>
            <div className="container">
                <div className="row">
                    <div className="col col-xs-12">
                        <div className="wpo-fun-fact-grids-wrap">
                            <div className="wpo-fun-fact-grids clearfix">
                                {
                                    locale === "ar" ? <>
                                        {funFact.map((funfact, fitem) => (
                                            <div className="grid" key={fitem}>
                                                <div className="info">
                                                    <h3>
                                                        <span>{
                                                            funfact.Symbol === "+" ? <>
                                                                {funfact.Symbol}
                                                                <CountUp
                                                                    end={parseInt(funfact.title, 10)}
                                                                    formattingFn={toArabicNumerals}
                                                                    enableScrollSpy
                                                                />
                                                            </>
                                                                :
                                                                <span style={{ padding: "10px" }}>
                                                                    <CountUp
                                                                        end={parseInt(funfact.title, 10)}
                                                                        formattingFn={toArabicNumerals}
                                                                        enableScrollSpy
                                                                    />
                                                                    {funfact.Symbol}
                                                                </span>}
                                                        </span>
                                                    </h3>
                                                    <p>{funfact.subTitle}</p>
                                                </div>
                                            </div>
                                        ))}
                                    </>
                                        :
                                        <>
                                            {funFact.map((funfact, fitem) => (
                                                <div className="grid" key={fitem}>
                                                    <div className="info">
                                                        <h3><span><CountUp end={funfact.title} enableScrollSpy /></span>{funfact.Symbol}</h3>
                                                        <p>{funfact.subTitle}</p>
                                                    </div>
                                                </div>
                                            ))}
                                        </>
                                }
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <span id="counter" className='d-none' />
        </section>
    );
};

export default FunFact;
