import { useNavigate } from "react-router";
import ArrowRightIcon from "./icons/map/ArrowRightIcon";
import Button from "./ui/Button";
import { motion } from "motion/react";
import IMarker from "../types/IMarker";
import { useEffect, useState } from "react";
import clsx from "clsx";

export default function SelectedComplexCard({ marker }: { marker: IMarker }) {
  const navigate = useNavigate();
  const [isImageLoaded, setIsImageLoaded] = useState(false);

  useEffect(() => {
    setIsImageLoaded(false);
  }, [marker]);

  return (
    <motion.div
      id={`selected-complex-card`}
      key={marker.id}
      initial={{ opacity: 0, bottom: -16 }}
      animate={{ opacity: 1, bottom: 0 }}
      exit={{ opacity: 0, bottom: -16 }}
      transition={{ duration: 0.3 }}
    >
      <div className="rounded-2xl flex gap-3 p-4 bg-white absolute bottom-3 left-3 w-[calc(100%-24px)]">
        <div className="relative w-26 h-26">
          <img
            src={`/images/map/markers/cards/${marker.name}.jpg`}
            alt={marker.title}
            className={clsx(
              "rounded transition-opacity duration-300 pointer-events-none",
              isImageLoaded ? "opacity-100" : "opacity-0"
            )}
            onLoad={() => setIsImageLoaded(true)}
          />
          <div
            className={clsx(
              "absolute inset-0 flex items-center justify-center tran",
              isImageLoaded ? "opacity-0" : "opacity-100"
            )}
          >
            <p className="text-xs">Loading...</p>
          </div>
        </div>
        <div className="flex flex-col justify-between border-b border-[#E2E2DC] flex-1">
          <div className="flex justify-between gap-4">
            <p className="font-semibold leading-[115%]">
              Rove Home
              <br />
              {marker.title}
            </p>
            <p className="text-[#00BED7] text-[10px] leading-[135%]">
              {marker.unitsCount} units
            </p>
          </div>
          <Button
            disabled
            variant="tertiary"
            size="small"
            className="w-fit"
            onTouchStart={() => navigate(`/complex/${marker.name}`)}
          >
            Explore
            <span className="w-4 h-4">
              <ArrowRightIcon />
            </span>
          </Button>
        </div>
      </div>
    </motion.div>
  );
}