import { H2, H6, P, } from "@/components/ui/typography"
import { useTranslations } from "next-intl"
import {  DadycarChallengeCard2 } from "@/components/ui/cards"
import { MainLogo } from "@/components/ui/Logos"

interface IDadycarChallengesSection2 {
    content: {
        title: string,
        subTitle?: string,
        challenges: {
            problem: string,
            problemDescription?: string,
            sollution: string,
            sollutionDescription: string,
        }[]
    }
}

const DadycarChallengesSection2 = ({ content }: IDadycarChallengesSection2) => {
    const t = useTranslations()

    return (
        <div className=" flex flex-col gap-16 justify-center items-center">
            <div className="flex flex-col gap-2 text-center">
                <H2 className="max-w-[620px] ">{t(content.title)}</H2>
                {content.subTitle && <P className="max-w-[702px]">{t(content.subTitle)}</P>}
            </div>
            <ul className="flex flex-col gap-12 lg:gap-6 ">
                <li className=" flex items-center justify-around max-sm:hidden ">
                    <div className="px-[24px] py-[10px] flex items-center justify-center rounded-[8px] border-[1px] border-dashed border-[#D3D3D7]">
                        <H6 className='text-muted-foreground' >{t("Challenges")}</H6>
                    </div>
                    <div className=" flex items-center gap-4">
                        <H6 className="text-muted-foreground">{t("Solution of")}</H6>
                        <MainLogo />
                    </div>
                </li>
                {
                    content.challenges.map((challenge, index) => (
                        <DadycarChallengeCard2 key={index} challenge={challenge} />
                    ))
                }
            </ul>
        </div>
    )
}

export default DadycarChallengesSection2