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

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

const DadyCarPresentationSection = ({ content, reversed }: IDadyCarPresentationSection) => {
    const t = useTranslations()
    return (
        <div className='flex flex-col gap-16 items-center w-full'>
            <div className={`flex  ${reversed ? "flex-col-reverse xl:flex-row-reverse" : "flex-col xl:flex-row"}  items-center justify-center gap-16`}>
                <div className='bg-white overflow-hidden w-[320px] h-[257px] lg:w-[520px] lg:h-[357px] flex flex-col justify-center items-center rounded-md'>
                    <div className='absolute '>
                    <MainLogo />
                    </div>
                    <DadycarParticles/>
                </div>
                <ul className='flex flex-col gap-4  xl:max-w-[50%]'>
                <H3 className='!font-bold'>{t(content.title)}</H3>
                    {content.details.map((detail, i) => (
                        <li key={i} className='flex flex-col gap-5'>
                            {detail.title && <H4>{t(detail.title)}</H4> }
                            <P>{t(detail.description)}</P>
                        </li>
                    ))}
                    {content.buttonTxt &&
                        <Button className='w-fit max-sm:mx-auto' link={content.link}>{t(content?.buttonTxt)}</Button>
                    }
                </ul>
            </div>
        </div>
    )
}

export default DadyCarPresentationSection