import { useState } from "react";
import Button from "./ui/Button";
import Input from "./ui/Input";
import { Link } from "react-router";

const INTERESTS = ["Retail", "Office", "Residential"] as const;

function Feedback() {
  const [interests, setInterests] = useState<(typeof INTERESTS)[number][]>([]);

  function handleInterestClick(interest: (typeof INTERESTS)[number]) {
    if (interests.includes(interest)) {
      setInterests((prev) => prev.filter((i) => i !== interest));
    } else {
      setInterests((prev) => [...prev, interest]);
    }
  }

  return (
    <div className="2xl:grid max-2xl:space-y-8 grid-cols-2 2xl:gap-[1.111vw]">
      <h2 className="2xl:h2 md:h3 text-2xl max-md:leading-[110%] md:max-2xl:max-w-[63.021vw] max-md:max-w-[328px] [font-family:New_York_Large]">
        Enquire about joining this thriving community at the heart of Abu Hamour
        by contacting a member of our sales team today
      </h2>

      <form className="2xl:space-y-[1.667vw] space-y-6 row-span-2">
        <Input
          label="Full Name"
          id="fullname"
          placeholder="Enter your full name"
        />
        <div className="flex max-md:flex-col 2xl:gap-[1.667vw] gap-6">
          <Input
            label="Email"
            id="email"
            type="email"
            placeholder="Enter your email"
          />
          <Input label="Phone Number" id="phone" type="tel" placeholder="" />
        </div>
        <div className="2xl:space-y-[0.833vw] space-y-3">
          <p className="text-m">What are you interested in?</p>
          <div className="flex 2xl:gap-[0.833vw] gap-3">
            {INTERESTS.map((interest) => (
              <Button
                key={interest}
                variant={interests.includes(interest) ? "cta" : "primary"}
                size="large"
                type="button"
                onClick={() => handleInterestClick(interest)}
              >
                {interest}
              </Button>
            ))}
          </div>
        </div>
        <Input
          label="Message"
          id="message"
          placeholder="Enter your message here"
          isTextArea
          maxLength={180}
        />
        <Button
          variant="cta"
          size="large"
          type="submit"
          className="w-full"
          onClick={(e) => e.preventDefault()}
        >
          Send Message
        </Button>
      </form>

      <div className="md:grid items-end md:row-start-2 md:grid-cols-3 2xl:gap-y-[2.222vw] gap-y-8 2xl:gap-x-[1.111vw] gap-x-4 max-md:space-y-6 max-md:max-w-[213px]">
        <div className="2xl:space-y-[0.556vw] space-y-2">
          <p className="text-s opacity-60">Address</p>
          <p className="text-s">Mesaimeer Street, Abu Hamour, Doha-Qata</p>
        </div>
        <div className="2xl:space-y-[0.556vw] space-y-2">
          <p className="text-s opacity-60">Management Office</p>
          <p className="text-s">
            Sabah Al Ahmad Corridor, Abu Hamour, Doha, Qatar
          </p>
        </div>
        <div className="2xl:space-y-[0.556vw] space-y-2 md:col-start-1">
          <p className="text-s opacity-60">Email Address:</p>
          <Link
            target="_blank"
            className="text-s text-[#F47F52]"
            to="mailto:info@barahatown.com"
          >
            info@barahatown.com
          </Link>
        </div>
        <div className="2xl:space-y-[0.556vw] space-y-2">
          <p className="text-s opacity-60">Leasing Department:</p>
          <Link
            target="_blank"
            className="text-s text-[#F47F52]"
            to="tel:+97450254555"
          >
            +974 5025 4555
          </Link>
        </div>
        <div className="2xl:space-y-[0.556vw] space-y-2">
          <p className="text-s opacity-60">Call Center:</p>
          <Link
            target="_blank"
            className="text-s text-[#F47F52]"
            to="tel:+97444421073"
          >
            +974 4442 1073
          </Link>
        </div>
      </div>
    </div>
  );
}

export default Feedback;
