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

interface IPresentationSection3 {
    content: {
        title?: string
        subtitle?: string
        feature: {
            title: string
            description: string
        }
        buttonTxt?: string,
        button2Txt?: string,
    }
    children?: React.ReactNode
    reversed?: boolean
    className?: string,
    buttonsClassName?: string,
    textDescriptionMarginTop?: string,
    isFlexShrinkChildren?: boolean,
    subTitleMaxWidth?:string
}

const PresentationSection3 = ({ content, reversed = false, children, className, buttonsClassName, textDescriptionMarginTop, isFlexShrinkChildren = true,subTitleMaxWidth }: IPresentationSection3) => {
    const t = useTranslations()

    return (
        <section className={`flex flex-col gap-14 ${className}`}>
            <div className='text-center flex items-center flex-col lg:mx-10 gap-4'>
                {content.title && <H2>{t(content.title)}</H2>}
                {content.subtitle && <S className={`text-gray-500 !font-normal ${subTitleMaxWidth && `max-w-[${subTitleMaxWidth}]`}`}>{t(content.subtitle)}</S>}
            </div>

            <div className={`flex items-center gap-10 lg:gap-28 max-lg:flex-col ${reversed ? 'lg:flex-row-reverse' : ''}`}>
                <div className='flex flex-col gap-6'>
                    <div className='flex flex-col gap-4'>
                        <H2>{t(content.feature.title)}</H2>
                        <S className={`!text-gray-600 !font-normal ${textDescriptionMarginTop}`}>{t(content.feature.description)}</S>
                    </div>

                    <div className={`flex items-center gap-2 flex-wrap ${buttonsClassName}`}>
                        {content.buttonTxt &&
                            <Button className='lg:w-fit max-lg:mt-2'>
                                {t(content.buttonTxt)}
                            </Button>
                        }
                        {content.button2Txt &&
                            <Button variant={'ghost'} className='lg:w-fit max-lg:mt-2'>
                                {t(content.button2Txt)}
                            </Button>
                        }
                    </div>
                </div>

                {children && (
                    <div className={isFlexShrinkChildren ? "flex-shrink-0" : "w-full"}>
                        {children}
                    </div>
                )}
            </div>
        </section>
    )
}

export default PresentationSection3