import React from "react";

import "./ContactInfoSection.scss";

import ReactTooltip from "react-tooltip";

import customerSupport from "../../assets/icons/customer-support.png";
import lightGreenLine from "../../assets/icons/light-green-line.svg";
import lightBlueLine from "../../assets/icons/light-blue-line.svg";

const ContactInfoSection = ({
  contactInfoSectionBgColor,
  dayNumTextColor,
  contentTextColor,
}) => {
  return (
    <section
      className={`relative flex flex-col sm:flex-row items-center justify-center p-4 ${contactInfoSectionBgColor}`}
    >
      {/* line */}
      <img
        src={lightBlueLine}
        alt=""
        className="hidden sm:block absolute right-72"
      />
      {/* middle content */}
      <img
        src={customerSupport}
        alt=""
        data-tip="صفحه تماس با ما"
        className="w-20 cursor-pointer customer-support"
      />
      <ReactTooltip place="bottom" type="dark" effect="float" />
      <p
        className={`mr-0 sm:mr-10 mt-5 sm:mt-0 text-sm leading-6 ${contentTextColor}`}
      >
        <span className={`${dayNumTextColor}`}>7 </span>
        روز هفته
        <span className={`${dayNumTextColor}`}> 24 </span>
        ساعته
        <br />
        منتظر شنیدن صدای گرمتان هستیم
      </p>
      <div className="flex flex-col mr-0 sm:mr-10 mt-5 sm:mt-0">
        <a href="tel:021654412" className={`text-sm ${contentTextColor}`}>
          021654412
        </a>
        <a
          href="mailto:webmaster@example.com"
          className={`text-sm ${contentTextColor}`}
        >
          info@danovin.ir
        </a>
      </div>
      {/* line */}
      <img
        src={lightGreenLine}
        alt=""
        className="hidden sm:block absolute left-72"
      />
    </section>
  );
};

export default ContactInfoSection;

ContactInfoSection.defaultProps = {
  contactInfoSectionBgColor: "bg-midGrayBgColor",
  dayNumTextColor: "text-lightBlueTextColor2",
  contentTextColor: "text-darkCrimsonTextColor",
};