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

interface IPresentationSection {
    content: {
        title?: string,
        details: {
            title: string,
            description: string
        }[],
        buttonTxt?: string,
        link?: string,
        secondButtonTxt?: string,
    }
    className?: string
    children?: React.ReactNode
    reversed?: boolean,
    isFlexButtons?: boolean
}

const PresentationSection = ({ content, reversed, children, className, isFlexButtons = false }: IPresentationSection) => {
    const t = useTranslations()
    return (
        <div className='flex flex-col gap-16 items-center '>
            {content?.title && (
                <H3 className='text-center'>{t(content.title)}</H3>
            )}
            <div className={`flex w-full  ${reversed ? "flex-col-reverse xl:flex-row-reverse" : "flex-col xl:flex-row"}  items-center justify-center gap-16 ${className}`}>
                {children}
                <ul className='flex flex-col gap-5 lg:gap-7 xl:max-w-[40%]'>
                    {content.details.map((detail, i) => (
                        <li key={i} className='flex flex-col gap-5'>
                            <H4>{t(detail.title)}</H4>
                            <P>{t(detail.description)}</P>
                        </li>
                    ))}
                    {isFlexButtons ? (
                        <div className={`flex items-center gap-1 lg:gap-2 flex-wrap`}>
                            {content.buttonTxt &&
                                <Button className='w-fit max-sm:mx-auto' link={content.link}>{t(content?.buttonTxt)}</Button>
                            }
                            {content.secondButtonTxt &&
                                <Button variant={'ghost'} className='lg:w-fit'>
                                    {t(content.secondButtonTxt)}
                                </Button>
                            }
                        </div>
                    ) : <>

                        {content.buttonTxt &&
                            <Button className='w-fit max-sm:mx-auto' link={content.link}>{t(content?.buttonTxt)}</Button>
                        }
                    </>}

                </ul>
            </div>
        </div>
    )
}

export default PresentationSection