/*
  Facts component to display a list of facts with titles and descriptions.
*/
import { AboutUsContent } from '@/src/types/StaticContent/aboutus.content.type'
import styles from './Facts.module.scss'

// Define the props type for the Facts component
interface FactsProps {
    FactsData: AboutUsContent['FACTS']
}

const Facts = ({ FactsData }: FactsProps) => {
    return (
        <section className={`${styles.FactsWrapper} mt-[30px] mb-[30px] sm:mt-[40px] lg:mt-0 sm:mb-[40px] lg:mb-[50px] xxl:mb-[65px]`}>
            <div className={`container`}>
                <h2 className={`!font-fw500 !mb-[15px] md:!mb-[20px] xl:!mb-[24px]`}>{FactsData.TITLE}</h2>
                <div className={`grid grid-cols-1 sm:grid-cols-3 gap-3.5 md:gap-5 lg:gap-6 xxxl:gap-9`}>
                    {FactsData.FACTS_DATA.map((item, index) => (
                        <div className={`${styles.FactsItem} p-4 md:p-6 xxl:p-7`} key={index}>
                            <h3 className={`h2 !font-fw500 !mb-2 sm:!mb-2.5 md:!mb-4 lg:!mb-5`}>{item.TITLE}</h3>
                            <p className={`!mb-0`}>{item.DESCRIPTION}</p>
                        </div>
                    ))}
                </div>
            </div>
        </section>
    )
}

export default Facts