import { LinesGradient } from '@/assets/svg'
import { metaTitles } from '@/components/metaData/metaTitles'
import { Button } from '@/components/ui/buttons/Button'
import CustomImage from '@/components/ui/miscellaneous/CustomImage'
import { H2, H5, H6, S } from '@/components/ui/typography'
import { useTranslations } from 'next-intl'
import React from 'react'

interface ICTASection {
    content: {
        title?: string,
        subTitle: string,
        description?:string
        primaryButtonTxt: string,
        primaryMobileButtonTxt: string,
        secondaryButtonTxt: string
    }
}

const CTASection = ({ content }: ICTASection) => {
    const t = useTranslations()
    return (
        <div className='flex overflow-hidden relative flex-col justify-center items-center gap-3 bg-lightBackground lg:p-10 p-4 sm:px-24 lg:px-40  2xl:px-80 text-center'>
           {content.title && <H6 className='text-primary'>{t(content.title)}</H6>}
            <H2 className=''>{t(content.subTitle)}</H2>
            <H5 className='!font-medium text-gray-600 max-w-[800px]'>{t(content.description)}</H5>
            <div className='flex items-center justify-center gap-1 sm:hidden'>
                <S className='text-muted-foreground'>{t("Or call us at")}</S>
                <H6 className='text-primary'>{process.env.NEXT_PUBLIC_CONTACT_PHONE}</H6>
            </div>
            <div className='flex items-center gap-3 mt-4 z-10'>
                <Button className='w-48 sm:hidden'>{t(content.primaryMobileButtonTxt)}</Button>
                <Button className='w-48 max-sm:hidden'>{t(content.primaryButtonTxt)}</Button>
                <Button className='w-48 border-none max-sm:hidden' variant={"outline"} url={process.env.NEXT_PUBLIC_PLATFORM_REGISTER_URL}>{t(content.secondaryButtonTxt)}</Button>
            </div>
            <CustomImage pageTitle={metaTitles?.integrationsCarburantMeta_Title} src={LinesGradient} alt="cta" className='hidden lg:block  absolute -bottom-10 -left-40  w-[700px] h-[400px] rotate-180 scale-x-[-1]' />
            <CustomImage pageTitle={metaTitles?.integrationsCarburantMeta_Title} src={LinesGradient} alt="cta" className='hidden lg:block  absolute -bottom-10 -right-40  w-[700px] h-[400px] rotate-180' />
        </div>
    )
}

export default CTASection