import ArrowLeftC from "../icons/ArrowLeftC";
import { Button } from "@mui/material";
import FieldLabel from "./FieldLabel";
import Field from "@/app/component/Field";

function Connect() {
  return (
    <div
      className="lg:min-w-[calc(50%_+_70px)] w-full lg:translate-x-[140px] bg-[#FFF] lg:p-[32px]
                shadow-[0px_0px_28.6px_0px_rgba(147,_147,_147,_0.25)] mt-[16px] lg:mt-0 p-[16px] sm:p-[21px] md:p-[27px]"
    >
      <div data-aos="zoom-in">
        <div className="flex flex-col justify-center items-center gap-[10px]">
          <p className="text-[#3B3B3B] text-[16px] font-bold">
            با ما در ارتباط باشید
          </p>
          <p className="text-[#525252] text-[14px] font-normal">
            نظرات و پیشنهادات خود را با ما در میان بگذارید.
          </p>
        </div>
        <div className="mt-[40px] flex flex-col gap-[20px]">
          <div className="flex flex-col sm:flex-row items-center justify-center gap-[24px] sm:gap-[21px] md:gap-18px] lg:gap-[16px]">
            <FieldLabel title="نام و نام خانوادگی">
              <Field isPlaceHolder={true} title="" type="text" />
            </FieldLabel>
            <FieldLabel title="شماره موبایل">
              <Field isPlaceHolder={true} title="09123456789" type="number" />
            </FieldLabel>
          </div>
          <div>
            <Field title="پیام شما..." type="text" multiline={true} />
          </div>
        </div>
        <Button
          variant="contained"
          className="!mt-[40px] !py-[8px] md:!py-[9px] !px-[34px] !flex !items-center !gap-[4px] !mr-auto"
        >
          ارسال پیام
          <ArrowLeftC />
        </Button>
      </div>
    </div>
  );
}

export default Connect;