import Head from 'next/head';
import { useRouter } from 'next/router';
import { motion } from 'framer-motion';
import { GenericLayout } from '@/components/Layouts';
import { data } from '../../public/privacy';
import { dynamicId } from 'helpers';
import { fadeInNoScroll } from '@/variants';

const PrivacyPolicy = () => {
    const { locale } = useRouter();
    const { title, h1, description, content } =
        data[locale === 'en' ? 'en' : locale === 'fr' ? 'fr' : 'es'];
    return (
        <>
            <Head>
                <title>{`UO Solutions | ${title}`}</title>
                <meta name='description' content={h1} />
            </Head>
            <div className='bg-heavy-metal p-5 text-alabaster lg:p-10'>
                <motion.div className='container' {...fadeInNoScroll(1, 0.25)}>
                    <h1 className='mb-5 border-l-4 border-vermilion pl-4 text-xl font-bold text-vermilion'>
                        {h1}
                    </h1>
                    <div className='text-sm'>
                        <p
                            dangerouslySetInnerHTML={{ __html: description }}
                        ></p>
                        {content.map(privacy => (
                            <div
                                key={dynamicId()}
                                className='mt-6'
                                dangerouslySetInnerHTML={{ __html: privacy }}
                            ></div>
                        ))}
                    </div>
                </motion.div>
            </div>
        </>
    );
};

PrivacyPolicy.getLayout = page => <GenericLayout>{page}</GenericLayout>;

export default PrivacyPolicy;
