import AnimationTextHead from '@/app/component/AnimationTextHead';
import UnderlineLG from '../icons/UnderlineLG';
import TickOrangeA from '../icons/TickOrangeA';

const ourServices = [
    'جستجوی سریع پزشک ',
    'جستجوی کلینیک و مراکز درمانی',
    'نوبت گیری راحت و آسان',
    'دشبورد تخصصی بیمار',
    'دشبورد تخصصی پزشک',
    'نوبت گیری راحت و آسان'
]

function Services() {
    return (
        <div className='mt-[16px] sm:mt-[24px] md:mt-[32px] lg:mt-[40px] px-[16px] sm:px-[12%]'>
            <div className='flex justify-center'>
                <AnimationTextHead name='zoom-in-up' text='خدمات ما'>
                    <UnderlineLG />
                </AnimationTextHead>
            </div>
            <ul
                className='mt-[20px] sm:mt-[26px] md:mt-[33px] lg:mt-[40px] flex flex-wrap gap-x-[72px] 
                gap-y-[20px] sm:gap-y-[32px] md:gap-y-[44px] lg:gap-y-[56px] lg:grid lg:grid-cols-3'
            >
                {ourServices.map((item, idx) => (
                    <li
                        key={idx}
                        className='flex items-start justify-start gap-[8px]'
                    >
                        <TickOrangeA />
                        <p className='text-[#525252] text-[16px] font-medium'>{item}</p>
                    </li>
                ))}
            </ul>
        </div>
    )
}

export default Services