// @ts-nocheck

import React from "react"
import Container from "../shared/container"
import Image from "next/image"
import myImage from "@/public/card.png"
import MainLink from "../shared/main-link"

function InfoSection({
    title,
    description,
    image,
    btnText,
    btnLink,
    reverse,
    locale,
}: {
    title: string
    description: string
    image: any
    btnText: string
    btnLink: string
    reverse?: boolean
    locale?: boolean
}) {
    return (
        <section className="bg-background px-5 lg:px-0 mt-0">
            <Container>
                <h2 className={`text-[32px] ${reverse ? "" : "mb-5 lg:mb-7"}`}>{title}</h2>
                <div className={`flex flex-col gap-7 lg:gap-14 ${reverse ? "lg:flex-row-reverse" : "lg:flex-row"}  items-center`}>
                    <div className="w-full lg:w-[40%] mb-0 h-[350px]"
                    
                    
                    data-aos="fade-right" 
                    data-aos-delay={100}
                    data-aos-duration="800"
                    
                
                >
                        <Image
                            width={1000}
                            height={700}
                            src={image}
                            alt="Our Team"
                            className="w-full h-full object-cover rounded-lg"
                        />
                    </div>
                    <div className="w-full lg:w-[60%] max-lg:mt-5"
                    
                    data-aos="fade-right" 
                    data-aos-delay={100}
                    data-aos-duration="800"
                    >
                        <p className="text-muted-foreground mb-4 font-light text-xl max-lg:mb-5">{description}</p>
                        <MainLink
                            href={btnLink}
                            className="bg-linearbg text-secondary-foreground hover:bg-secondary/80 px-6 py-4 rounded-lg text-white inline-block"
                            locale={locale}
                            styleMe
                        >
                            {btnText}
                        </MainLink>
                    </div>
                </div>
            </Container>
        </section>
    )
}

export default InfoSection