import TextLoading from "@/app/component/loading/Text";
import TickCircleOrange from "@/components/icons/TickCircleOrange";

function Services({ data }) {
  return (
    <ul
      className=" mt-[8px] w-full p-[22px] rounded-[8px] bg-[#FFF] flex flex-wrap items-center justify-start lg:grid grid-cols-4 gap-x-[40px] sm:gap-x-[48px] md:gap-x-[56px] lg:gap-x-[64px] gap-y-[24px] sm:gap-y-[30px] md:gap-y-[35px] lg:gap-y-[40px]"
    >
      {data?.services?.map((item, idx) => (
        <li
          key={idx}
          className="flex items-center justify-start gap-2 cursor-pointer hover-item-clinic"
        >
          <div className="min-w-[24px] min-h-[24px]">
            <TickCircleOrange />
          </div>
          <TextLoading width={80} height={18}>
            <h3 className="text-[16px] font-normal text-[#525252]">
              {item.name}
            </h3>
          </TextLoading>
        </li>
      ))}
    </ul>
  );
}

export default Services;
