import { motion } from "framer-motion";
import ProgressPie from "./ProgressPie";
import TouchScreenIcon from "./icons/TouchScreenIcon";
import VRIcon from "./icons/VRIcon";
import MobileIcon from "./icons/MobileIcon";
import IProject from "../types/IProject";
import { format } from "date-fns";

function ProjectCard({
  name,
  company,
  city,
  image,
  stage = 6,
  releaseDate = format(new Date(), "yyyy-MM-dd"),
  devices = [],
}: IProject) {
  const stagePercentage = Math.round((100 / 6) * stage);

  return (
    <motion.div
      initial={{ opacity: 0 }}
      whileInView={{ opacity: 1 }}
      viewport={{ once: true, margin: "-100px" }}
      transition={{ duration: 1, ease: [0.58, 0.12, 0.27, 0.98], delay: 0.2 }}
      className="group relative aspect-[4/3] p-4 flex items-end overflow-hidden"
    >
      <div
        className="group-hover:scale-110 transition-transform duration-500 absolute top-0 left-0 w-full h-full bg-cover bg-center bg-no-repeat"
        style={{
          backgroundImage: `url(${import.meta.env.VITE_API_URL}/upload/${image})`,
        }}
      ></div>
      <div className="absolute top-0 left-0 w-full h-full bg-gradient-card"></div>
      <div className="relative flex flex-col gap-4">
        <div>
          <p className="2xl:text-2xl text-xl font-gilroy font-medium">{name}</p>
          <p className="2xl:text-sm text-xs">
            {company !== "-" && `${company},`} {city}
          </p>
        </div>

        <div className="flex gap-2">
          {stage < 6 ? (
            <div className="bg-[#14161F] px-3 py-2 rounded-full w-fit flex items-center gap-1">
              <p className="font-gilroy font-medium leading-none">
                {stagePercentage}%
              </p>
              <ProgressPie value={stagePercentage} />
            </div>
          ) : (
            <div className="bg-gradient py-2.5 px-4 rounded-full">
              <p className="font-gilroy font-medium leading-none">
                {new Date(releaseDate).getFullYear()}
              </p>
            </div>
          )}

          {devices.length > 0 && (
            <>
              {devices.includes("stream") && (
                <div className="bg-[#14161F] px-3 py-2 rounded-full w-fit flex items-center gap-2">
                  <div className="w-2 h-2 bg-gradient rounded-full"></div>
                  <p className="font-gilroy font-semibold leading-none text-gradient">
                    Stream
                  </p>
                </div>
              )}
              {devices.includes("touch") && (
                <div className="bg-[#14161F] p-2 rounded-full w-fit flex items-center gap-2">
                  <TouchScreenIcon />
                </div>
              )}
              {devices.includes("mobile") && (
                <div className="bg-[#14161F] p-2 rounded-full w-fit flex items-center gap-2">
                  <MobileIcon />
                </div>
              )}
              {devices.includes("vr") && (
                <div className="bg-[#14161F] p-2 rounded-full w-fit flex items-center gap-2">
                  <VRIcon />
                </div>
              )}
            </>
          )}
        </div>
      </div>
    </motion.div>
  );
}

export default ProjectCard;