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

interface IPresentationSection2 {
    content: {
        mainTitle?:string
        mainSubTitle?:string
        header?: string,
        title?: string,
        subtitle?: string,
        details?: {
            title: string,
            description: string
        }[],
        buttonTxt?: string,
        link?: string,
    }
    children?: React.ReactNode
    reversed?: boolean
}

const PresentationSection2 = ({ content, reversed, children }: IPresentationSection2) => {
    const t = useTranslations()
    return (
        <div className='flex flex-col gap-16 items-center'>
            <div className="flex flex-col gap-2 text-center">
                {content.mainTitle && <H3>{t(content.mainTitle)}</H3>}
                {content.mainSubTitle && <P>{t(content.mainSubTitle)}</P>}
            </div>
            <div className={`flex  ${reversed ? "flex-col-reverse xl:flex-row-reverse" : "max-lg:flex-col-reverse flex-col xl:flex-row"}  items-center justify-center gap-16`}>
                {children}
                <ul className='flex flex-col gap-5 lg:gap-7 xl:max-w-[40%] '>
                    <div className='flex flex-col gap-3'>
                    {content.header && <S className='text-primary'>{t(content.header)}</S> }
                    <H3 >{t(content.title)}</H3>
                    <H6  className=' text-gray-500 !font-normal'>{t(content.subtitle)}</H6>
                    </div>

                    {content?.details && content?.details.map((detail, i) => (
                        <li key={i} className='flex flex-col gap-5'>
                            <H6 className="text-muted-foreground font-normal">
                                <span className="text-primary font-semibold">{t(detail.title)}</span> : {t(detail.description)}
                            </H6>
                        </li>
                    ))}
                    {content.buttonTxt &&
                        <Button className='w-fit' link={content.link}>{t(content?.buttonTxt)}</Button>
                    }
                </ul>
            </div>
        </div>
    )
}

export default PresentationSection2