import ClipBoard from "../../icons/ClipBoard";
import CircleOrangeSm from "../../icons/CircleOrangeSm";

function Services({ data }) {
  return (
    <div className="flex flex-col items-start justify-start mt-[40px]">
      <div className="flex items-center justify-start gap-[6px]">
        <ClipBoard />
        <p className="text-[#E7EEF6] text-[20px] font-semibold">خدمات:</p>
      </div>
      <ul className="flex flex-col justify-start items-start gap-[16px] mt-[16px] font-normal ">
        {data?.expertise?.map((item, idx) => (
          <li key={idx} className="flex items-center justify-start gap-[4px]">
            <CircleOrangeSm />
            <p className="text-[16px] font-normal text-[#E7EEF6]">{item.name}</p>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default Services;