/* 
  This is the about us component for the home page.
*/
import { HomeContent } from '@/src/types/StaticContent/home.content.type';
import ImagesConstants from '@/src/utils/ImagesConstants';
import Routes from '@/src/utils/RouteConstants';
import Image from 'next/image';
import Link from 'next/link';

// Define the static content type for the AboutUs component
interface AboutUsProps {
    AboutUs: HomeContent['ABOUT_US']
}
const AboutUs = ({ AboutUs }: AboutUsProps) => {
    return (
        <>
            <section className={`my-[30px] sm:my-[40px] md:my-[50px] xl:my-[60px] xxl:my-[80px] xxxl:my-[100px]`}>
                <div className={`container`}>
                    <div className={`grid grid-cols-1 lg:grid-cols-2 items-center gap-6 lg:gap-8 xxl:gap-9`}>
                        <div className={`rounded-[20px] sm:rounded-[30px] overflow-hidden w-full`}>
                            <Image width={1000} height={1000} className={`!w-full !h-full !object-cover !object-center`} src={ImagesConstants.ABOUTUS_IMG} alt="about-us" />
                        </div>
                        <div>
                            <h2 className={`!mb-0`}>{AboutUs.TITLE}</h2>
                            <p className={`text-grey475Color !my-3.5 md:!my-5 lg:!my-6 xxl:!my-7 fs-18`}>{AboutUs.DESCRIPTION}</p>
                            <Link className={`PrimaryBtn w-max`} href={Routes.ABOUT}>{AboutUs?.LEARN_MORE}</Link>
                        </div>
                    </div>
                </div>
            </section>
        </>
    )
}

export default AboutUs