"use client";

import Link from "next/link";
import style from "./footer.module.css";
import styles from "../../../pages/index.module.css";
import Image from "next/image";
import map from "../../../public/assets/photos/map.png";
import Map from "../map/index";
import { useState } from "react";
import panelAxios from "../../services/panelAxios";
import dotenv from "dotenv";
dotenv.config();


function Footer({ data }) {
  const [email, setEmail] = useState("");
  const [comment, setComment] = useState("");
  const submitComment = async () => {
    if (email != "") {
      const raw = JSON.stringify({
        ConnectToUs: {
          Email: email,
          Comment: comment,
        },
      });
      await panelAxios.post("api/save", raw,{ });

      setEmail("");
      setComment("");
    } else alert("لطفا ایمیل را وارد نمایید.");
  };

  return (
    <>
      <div className={style.footer}>
        <div className={style.boxs}>
          <div className={style.address}>
            <div className="box">
              <div className={style.boxTitle}>
                <h1 className="icon locationIcon">آدرس</h1>
              </div>
              <div className={style.boxDesc}>
                <p>{data?.address}</p>
              </div>
            </div>
          </div>
          <div className={style.phoneNumber}>
            <div className={style.phoneBox}>
              <div className={style.boxTitle}>
                <h1 className="icon phoneIcon">تماس با ما</h1>
              </div>
              {data?.mobile1 && (
                <div className={style.phone}>
                  <Link href={`tel:${data?.mobile1}`}>همراه: {data?.mobile1}</Link>
                </div>
              )}

              {data?.mobile2 && (
                <div className={style.phone}>
                  <Link href={`tel:${data?.mobile2}`}>همراه: {data?.mobile2}</Link>
                </div>
              )}
            </div>
            <div className={style.links}>
              <Link href={data?.link_social_title1 ?? ''}  target="_blank" className="icon telegramIcon"></Link>
              <Link href={data?.link_social_title2 ?? ''}  target="_blank" className="icon whatsAppIcon"></Link>
              <Link href={data?.link_social_title3 ?? ''}  target="_blank" className="icon instagramIcon"></Link>
            </div>
            <div>
              <span>رایانامه: {data?.email1}</span>
            </div>
          </div>
        </div>
        <div className={`${style.connection} w50`}>
          <div className={`${styles.title} right ${style.connectionTitle}`}>
            <h1 className="icon triAngleIcon txtPrimary">ارتباط با</h1>
            <h1 className="txtSecondPrimary">{data?.company_name}</h1>
          </div>
          <div className={style.wrapper}>
            <div className="input w100 Email">
              <input
                type="email"
                name="email"
                id="email"
                value={email}
                placeholder="پست الکترونیکی"
                required
                aligns="left"
                onChange={(e) => setEmail(e.target.value)}
              />
            </div>
            <div className="input w100 textArea">
              <textarea
                name="textArea"
                id="textArea"
                value={comment}
                placeholder="متن نظر..."
                onChange={(e) => setComment(e.target.value)}
              ></textarea>
            </div>
          </div>
          <div className={`${style.button}`}>
            <button
              onClick={submitComment}
              value="ارسال"
              className="btn  sendRequest"
            >
              ارسال
            </button>
          </div>
        </div>
        <div className={`${style.location} w50`}>
          <div className={`${styles.title} right ${style.locationTitle}`}>
            <h1 className="icon triAngleIcon txtSecondPrimary">
              {data?.company_name}
            </h1>
            <h1 className="txtPrimary">اینجاست</h1>
          </div>
          <div className={style.map}>
            <Map data={data} />
          </div>
        </div>
        <span className={style.copyRight}>
          تمام حقوق مادی و معنوی این وبسایت متعلق به شرکت{" "}
          <span className={style.domains}>{data?.company_name}</span> می باشد.
        </span>
      </div>
    </>
  );
}

export default Footer;