import TickCircleOrange from '@/components/icons/TickCircleOrange';

function Services({ data }) {
  return (
    <ul className='mt-[8px] w-full p-[22px] gap-x-[64px] gap-y-[40px] rounded-[8px] bg-[#FFF] grid grid-cols-4'>
      {data.specialties.map((item, idx) => (
        <li
          key={idx}
          className='flex items-center justify-start gap-2'
        >
          <TickCircleOrange />
          <p
            className={`
            text-[16px] font-normal
            ${idx === 0 ? 'text-[#F17732]' : 'text-[#525252]'}
          `}
          >{item}</p>
        </li>
      ))}
    </ul>
  )
}

export default Services