import TelefonPoster from "@/components/icons/TelefonPoster";

function Telefon({ data }) {
  return (
    <div
      className={`flex-col items-start justify-start mt-[40px] ${data?.address?.[0]?.phone ? "flex" : "hidden"}`}
    >
      <div className="flex items-center justify-start gap-[6px]">
        <TelefonPoster />
        <p className="text-[#E7EEF6] text-[20px] font-semibold">تلفن:</p>
      </div>
      <p className="text-[#E7EEF6] text-[16px] font-normal mt-[16px]">
        {data?.address?.[0]?.phone}
      </p>
      {data?.address &&
        data?.address.length > 1 &&
        data?.address.map(
          (item, idx) =>
            idx !== 0 && (
              <span
                key={idx}
                dir="ltr"
                className="text-[#E7EEF6] text-[16px] w-fit font-normal mt-[12px] inline"
              >
                {item?.phone} -
              </span>
            )
        )}
    </div>
  );
}

export default Telefon;