import { Button } from '@/components/ui/buttons/Button'
import { H3, H6, S } from '@/components/ui/typography'
import { useTranslations } from 'next-intl'
import React from 'react'

interface ICTASection2 {
    content: {
        title: string,
        subTitle: string,
        primaryButtonTxt: string,
        primaryMobileButtonTxt: string,
        secondaryButtonTxt: string
        url?: string
    }
}

const CTASection2 = ({ content }: ICTASection2) => {
    const t = useTranslations()
    return (
        <div className='flex flex-col justify-center items-center gap-2 bg-lightBackground lg:p-10 p-4 sm:px-24 lg:px-40  2xl:px-80 text-center'>
            <H3 className=''>{t(content.title)}</H3>
            <H6 className='text-gray-500 lg:w-[70%] '>{t(content.subTitle)}</H6>
            <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'>
                <Button url={content.url} className=' sm:hidden'>{t(content.primaryMobileButtonTxt)}</Button>
                <Button url={content.url} className=' max-sm:hidden'>{t(content.primaryButtonTxt)}</Button>
                <Button url={content.url || process.env.NEXT_PUBLIC_PLATFORM_REGISTER_URL } className=' border-none max-sm:hidden' variant={"outline"} >{t(content.secondaryButtonTxt)}</Button>
            </div>
        </div>
    )
}

export default CTASection2