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

function Specialties({ data, loading }) {
  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.specialties.map((item, idx) => (
        <li key={idx} className="flex items-start justify-start gap-2">
          <div className="min-w-[24px] min-h-[24px]">
            <TickCircleOrange />
          </div>
          <TextLoading width={80} height={18} loading={loading}>
            <p
              className={`
                        text-[16px] font-normal
                        ${idx === 0 ? "text-[#F17732]" : "text-[#525252]"}
                    `}
            >
              {item}
            </p>
          </TextLoading>
        </li>
      ))}
    </ul>
  );
}

export default Specialties;
