irth-new-client-120/src/components/UnitTypeItem.tsx

import ShareIcon from "./icons/ShareIcon";
import Button from "./ui/Button";
import Project from "../types/Project";
import UnitType from "../types/UnitType";
import { useNavigate } from "react-router";
import PlayIcon from "./icons/PlayIcon";
import VideoModal from "./VideoModal";
import useModalStore from "../stores/useModalStore";
import UnitSlider from "./UnitSlider";

interface UnitTypeItemProps {
  project: Project;
  type: UnitType;
}

function UnitTypeItem({ project, type }: UnitTypeItemProps) {
  const navigate = useNavigate();

  function handleShare() {
    navigator.share({
      title: type.name,
      url: window.location.href,
    });
  }

  const { setModal } = useModalStore();

  return (
    <div className="2xl:p-[2.222vw] md:max-2xl:p-[3.125vw] p-4 bg-white flex 2xl:gap-[2.222vw] md:max-2xl:gap-8 gap-6 max-2xl:flex-col">
      <UnitSlider unitTypeVariant={type.slug} complexName={project.slug} />
      <div className="flex flex-col justify-between 2xl:w-[21.944vw] flex-shrink-0">
        <div className="2xl:space-y-[1.667vw] space-y-6">
          <div className="flex items-start justify-between">
            <div className="flex flex-col 2xl:gap-y-[0.556vw] gap-y-2">
              <p className="font-medium md:text-h3 text-h4">{type.name}</p>
              <p className="2xl:rounded-[1.667vw] rounded-3xl 2xl:px-[0.833vw] 2xl:py-[0.278vw] px-3 py-1 outline outline-[#E2E2DC] text-[#0D1922]/70 text-caption-m w-fit">
                Up to {type.area}
              </p>
            </div>
            <Button onlyIcon variant="secondary" onClick={handleShare}>
              <span className="2xl:size-[1.389vw] size-5 text-[#0D1922]">
                <ShareIcon />
              </span>
            </Button>
          </div>
          <div className="2xl:space-y-[0.556vw] md:max-2xl:space-y-2 space-y-1">
            <p className="text-m text-[#00BED7]">{project.title}</p>
            <div className="flex items-center 2xl:gap-[0.556vw]">
              {type.wing && (
                <>
                  <p className="text-s text-[#0D1922]/70">{type.wing}</p>
                  <div className="2xl:w-[0.278vw] 2xl:h-[0.278vw] w-1 h-1 rounded-full bg-[#E2E2DC]" />
                </>
              )}
              <p className="text-s text-[#0D1922]/70">{type.floors}</p>
            </div>
          </div>
          <hr className="w-full border-[#E2E2DC] 2xl:h-[0.069vw] h-px" />
          {![
            "1-bedroom-d",
            "2-bedroom-a",
            "1-bedroom-loft-a",
            "1-bedroom-loft-b",
            "1-bedroom-loft-c",
          ].includes(type.slug) && (
            <button
              onClick={() =>
                setModal(
                  <VideoModal src="/videos/unit-types/marasi-drive/studio_flex.mp4" />
                )
              }
              className="2xl:p-[1.111vw] p-4 2xl:rounded-[1.111vw] text-left rounded-2xl flex items-center gap-[0.556vw] ring ring-[#E2E2DC] cursor-pointer w-full"
            >
              <div className="lg:space-y-[0.278vw] space-y-1 flex-1">
                <p className="text-h5 font-medium">ORI Cloud Bed</p>
                <p className="text-s text-[#00BED7]">
                  Live in the future, today
                </p>
              </div>
              <div className="2xl:size-[1.389vw] size-5">
                <PlayIcon />
              </div>
            </button>
          )}
          {/* {type.video && (
            <div className="2xl:p-[1.111vw] p-4 2xl:rounded-[0.833vw] rounded-xl outline outline-[#E2E2DC] flex 2xl:gap-[0.556vw] justify-between">
              <div className="2xl:space-y-[0.278vw] space-y-1">
                <p className="text-h5 font-medium">ORI Cloud Bed</p>
                <p className="text-s text-[#00BED7]">
                  Live in the future, today
                </p>
              </div>

              <Button variant="secondary" onlyIcon>
                <span className="2xl:size-[1.389vw] size-5 text-[#0D1922]">
                  <PlayIcon />
                </span>
              </Button>
            </div>
          )} */}
          <div className="2xl:space-y-[0.556vw] md:max-2xl:flex md:max-2xl:gap-2 max-md:space-y-2">
            <p className="text-caption-m">{type.desc[0]}</p>
            <p className="text-caption-m">{type.desc[1]}</p>
          </div>
        </div>
        <div className="flex 2xl:flex-col 2xl:gap-[0.556vw] gap-2 2xl:bottom-[2.222vw] bottom-0 bg-white md:max-2xl:-mx-[3.125vw] md:max-2xl:p-[3.125vw] max-md:-mx-4 max-md:p-4 max-2xl:rounded-t-2xl max-2xl:shadow-[0_-4px_20px_0_rgba(0,0,0,0.05)]">
          {type.tourAvailable && (
            <Button
              variant="cta"
              size="large"
              onClick={() =>
                navigate(`/virtual-tour/${project.slug}/${type.slug}`)
              }
            >
              Virtual tour
            </Button>
          )}
          {/* <Button disabled variant="cta" size="large">
            Book
          </Button> */}
        </div>
      </div>
    </div>
  );
}

export default UnitTypeItem;