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;