import React from "react";

import logoRectangle from "./images/logo-rectangle.svg";
import map from "./images/map.svg";
import marker from "./images/marker.svg";
import phone from "./images/phone.svg";

const ContactUsInfoCard = ({ items }) => {
  return (
    <div className="max-w-[650px] flex flex-col rounded border bg-white border-gray-200 p-4 mx-auto mt-10">
      {/* logo && map */}
      <div className="flex flex-row items-center justify-between ">
        <img src={map} alt="map" />
        <img src={logoRectangle} alt="map" />
      </div>
      {/* contact info */}
      {items.map((item, index) => (
        <div className="flex flex-row items-center mt-4">
          <img className="w-5" src={item.icon} alt={item.icon} />
          <p className=" text-[#2383E1] mr-2 ml-1 text-xs">{item.title}</p>
          <address className="text-[#0F0543] text-xs not-italic text-justify leading-6">
            {item.content}
          </address>
        </div>
      ))}
    </div>
  );
};

export default ContactUsInfoCard;

ContactUsInfoCard.defaultProps = {
  items: [
    {
      icon: marker,
      title: "نشانی:",
      content: "شارع دوم شارع حسینی عمود موکب ۲۲",
    },
    {
      icon: phone,
      title: "شماره تلفنی ضروری موکب:",
      content: "۰۸۶۲۵۴۶۴۸۲۳",
    },
    {
      icon: null,
      title: "تذکرات و نکات مهم:",
      content:
        "در این قسمت نکات مهم و ضروری برای موکب مورد نظر نوشته می شود و همچنین در مورد موارد مهم دیگر نیز در این قسمت  صحبت خواهد شد",
    },
  ],
};