import { H2, P, } from "@/components/ui/typography"
import { useTranslations } from "next-intl"
import { Button } from "@/components/ui/buttons/Button"
import ChallengeCard2 from "@/components/ui/cards/ChallengeCard2"

interface IChallengesSection2 {
    content: {
        title?: string,
        subTitle?: string,
        challenges: {
            icon: React.ReactNode,
            title: string,
            description?: string
            link?: string
            problem: string,
            sollution: string,
        }[]
        buttonTxt?: string
        link?: string
    }
    className?:string
    parentClassName?:string
}

const ChallengesSection2 = ({ content,className,parentClassName }: IChallengesSection2) => {
    const t = useTranslations()

    return (
        <div className=" flex flex-col gap-16 justify-center items-center bg-white py-10 px-4">
            <div className="flex flex-col gap-2 text-center">
                <H2 className="max-w-[600px]">{t(content.title)}</H2>
                {content.subTitle &&<P>{t(content.subTitle)}</P>}
            </div>
            <ul className={`grid grid-cols-1 lg:grid-cols-2 gap-y-16 gap-6 justify-center items-center text-center ${parentClassName}`}>
                {
                    content.challenges.map((challenge, index) => (
                        <ChallengeCard2 key={index} challenge={challenge}  className={`${className } `} />
                    ))
                }
            </ul>
            {content.buttonTxt &&
                <Button link={content.link}>{t(content.buttonTxt)}</Button>
            }
        </div>
    )
}

export default ChallengesSection2