import { isAfter, parse } from "date-fns";
import { motion } from "framer-motion";

interface ProjectCardProps {
  title: string;
  company: string;
  image: string;
  releaseDate: string;
  stream?: boolean;
}

function ProjectCard({
  title,
  company,
  image,
  releaseDate,
  stream,
}: ProjectCardProps) {
  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="aspect-[4/3] p-6 bg-cover bg-center bg-no-repeat flex items-end"
      style={{
        background: `linear-gradient(180deg, rgba(20, 22, 31, 0.00) 0%, rgba(20, 22, 31, 0.60) 100%), url('${image}'), lightgray 50% / cover no-repeat`,
      }}
    >
      <div className="flex flex-col gap-4">
        <div>
          <p className="text-2xl font-gilroy font-medium">{title}</p>
          <p className="text-sm">{company}</p>
        </div>

        <div className="flex gap-2">
          {isAfter(parse(releaseDate, "dd.MM.yyyy", new Date()), new Date()) ? (
            <div className="bg-[#14161F] px-4 py-2.5 rounded-full w-fit">
              <p className="font-gilroy font-medium leading-none">
                Релиз {releaseDate}
              </p>
            </div>
          ) : (
            <div className="bg-gradient px-4 py-2.5 rounded-full w-fit">
              <p className="font-gilroy font-medium leading-none">Сдан</p>
            </div>
          )}

          {stream && (
            <div className="bg-[#14161F] px-4 py-2.5 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>
          )}
        </div>
      </div>
    </motion.div>
  );
}

export default ProjectCard;