import useModalStore from "../../../stores/useModalStore";
import AmentitiesBadge from "../../AmentitiesCard";
import AmentitiesContentSlider from "../../AmentitiesContentSlider";
import AmenitiesBadge from "../../icons/AmenitiesBadge";
import AmphitheatreIcon from "../../icons/amentities/AmphitheatreIcon";
import BoulderingWallIcon from "../../icons/amentities/BoulderingWallIcon";
import ChangingRoomIcon from "../../icons/amentities/ChangingRoomIcon";
import ChessIcon from "../../icons/amentities/ChessIcon";
import CinemaIcon from "../../icons/amentities/CinemaIcon";
import ClimbingWallIcon from "../../icons/amentities/ClimbingWallIcon";
import CommunalDiningTablesIcon from "../../icons/amentities/CommunalDiningTablesIcon";
import CoworkingIcon from "../../icons/amentities/CoworkingIcon";
import LushLandscapeIcon from "../../icons/amentities/LushLandscapeIcon";
import MultiPurposeIcon from "../../icons/amentities/MultiPurposeIcon";
import PingPongIcon from "../../icons/amentities/PingPongIcon";
import PingPongInTubeIcon from "../../icons/amentities/PingPongInTubeIcon";
import PoolIcon from "../../icons/amentities/PoolIcon";
import RunningWheelIcon from "../../icons/amentities/RunningWheelIcon";
import SunLoungeIcon from "../../icons/amentities/SunLoungeIcon";
import SuspendedLoungingNetsIcon from "../../icons/amentities/SuspendedLoungingNetsIcon";
import WellnessIcon from "../../icons/amentities/WellnessIcon";
import PlayIcon from "../../icons/PlayIcon";
import Badge from "../../ui/Badge";
import Button from "../../ui/Button";
import VideoModal from "../../VideoModal";

function SkyGardenMarasiDrive() {
  const { setModal } = useModalStore();

  return (
    <div className="2xl:space-y-[2.222vw] space-y-8">
      <div className="2xl:space-y-[1.667vw] space-y-6">
        <div className="2xl:space-y-[0.556vw] space-y-2 border-b border-[#E2E2DC] 2xl:pb-[1.667vw] pb-6">
          <p className="text-h4 font-medium">Sky Garden</p>
          <Badge variant="secondary" text="15 Amenities" />
        </div>
        <div className="flex items-center 2xl:gap-[1.667vw] gap-4">
          <AmenitiesBadge count={3} type="Indoor" />
          <AmenitiesBadge count={12} type="Outdoor" />
        </div>
        <div className="bg-[#F3F3F2] 2xl:rounded-[1.111vw] rounded-2xl 2xl:p-[1.111vw] p-4 relative">
          <img
            src="/images/floor-plans/compass.png"
            className="absolute top-0 left-0 size-[7.222vw]"
            alt=""
          />
          <img
            src="/images/floor-plans/marasi-drive/sky-garden.png"
            alt="sky-garden"
            className="w-full"
          />
          <Button
            variant="cta"
            className="absolute 2xl:top-[1.667vw] 2xl:right-[1.667vw] md:max-2xl:top-6 md:max-2xl:right-6 top-4 right-4"
            onlyIcon
            size="small"
            onClick={() =>
              setModal(
                <VideoModal src="/videos/marasi-drive/SkyGardenMarasiDrive.mp4" />
              )
            }
          >
            <span className="2xl:size-[1.111vw] size-4">
              <PlayIcon />
            </span>
          </Button>
        </div>
      </div>
      <div className="2xl:space-y-[1.667vw] space-y-6">
        <p className="font-medium text-h4">Indoor Amenities</p>
        <div className="grid md:grid-cols-4 grid-cols-3 2xl:gap-[1.111vw] gap-4">
          <AmentitiesBadge icon={<PoolIcon />} title="Indoor Lap Pool" />
          <AmentitiesBadge icon={<WellnessIcon />} title="Wellness Features" />
          <AmentitiesBadge icon={<ChangingRoomIcon />} title="Changing Rooms" />
        </div>
      </div>
      <hr className="border-[#E2E2DC] h-[0.069vw]" />
      <div className="2xl:space-y-[1.667vw] space-y-6">
        <p className="font-medium text-h4">Outdoor Amenities</p>
        <div className="grid grid-cols-3 2xl:gap-x-[1.111vw] 2xl:gap-y-[1.667vw] gap-x-4 gap-y-6">
          <AmentitiesBadge icon={<PingPongIcon />} title="Padel Pong" />
          <AmentitiesBadge icon={<SunLoungeIcon />} title="Sun Lounging Deck" />
          <AmentitiesBadge icon={<CinemaIcon />} title="Outdoor Cinema" />
          <AmentitiesBadge
            icon={<BoulderingWallIcon />}
            title="Bouldering Wall"
          />
          <AmentitiesBadge
            icon={<PingPongInTubeIcon />}
            title="Ping Pong in a Tube"
          />
          <AmentitiesBadge icon={<AmphitheatreIcon />} title="Amphitheatre" />
          <AmentitiesBadge
            icon={<CommunalDiningTablesIcon />}
            title="Communal Dining Tables"
          />
          <AmentitiesBadge
            icon={<SuspendedLoungingNetsIcon />}
            title="Suspended Lounging Nets "
          />
          <AmentitiesBadge
            icon={<LushLandscapeIcon />}
            title="Lush Landscape"
          />
          <AmentitiesBadge icon={<RunningWheelIcon />} title="Running Wheel" />
          <AmentitiesBadge icon={<ChessIcon />} title="Chess Tables" />
          <AmentitiesBadge icon={<ClimbingWallIcon />} title="Climbing Wall" />
          <AmentitiesBadge
            icon={<CoworkingIcon />}
            title="Outdoor Coworking Space"
          />
          <AmentitiesBadge
            icon={<MultiPurposeIcon />}
            title="Multi-purpose Court"
          />
        </div>
      </div>
      <AmentitiesContentSlider
        srcs={[
          "/images/floor-plans/marasi-drive/skygarden/content1.jpg",
          "/images/floor-plans/marasi-drive/skygarden/content2.jpg",
          "/images/floor-plans/marasi-drive/skygarden/content3.jpg",
          "/images/floor-plans/marasi-drive/skygarden/content4.jpg",
        ]}
      />
    </div>
  );
}

export default SkyGardenMarasiDrive;