import { motion } from "framer-motion";
import { peek_icon, tag_icon } from "../assets";
import { Link } from "react-router-dom";

const ProjectCard = ({ project, hoveredProjectId, setHoveredProjectId }) => {
  // Function to create a URL-friendly slug from the project title
  const createSlug = (title) => {
    return title
      .toLowerCase()
      .replace(/[^a-z0-9 -]/g, "")
      .replace(/\s+/g, "-")
      .replace(/-+/g, "-");
  };

  const projectSlug = createSlug(project.title);

  return (
    <motion.div
      key={project.id}
      variants={{
        hidden: { opacity: 0, y: 50 },
        visible: { opacity: 1, y: 0 },
      }}
      whileHover={{ scale: 1.05 }}
      className="relative p-4 lg:p-6 mb-10 lg:max-w-[500px] rounded-lg shadow-lg bg-black/85"
    >
      <div
        className="project-image-container"
        onMouseEnter={() => setHoveredProjectId(project.id)}
        onMouseLeave={() => setHoveredProjectId(null)}
      >
        {/* Project Image with the link*/}
        <Link to={`/project/${projectSlug}`}>
          <motion.img
            src={project.image_url}
            alt={project.title}
            className="project-image rounded-md mb-6"
          />
        </Link>

        {/* Tech/Tool Icons */}
        <div className="tech-tools-container">
          {[...project.logos].map((icon, index) => (
            <img key={index} src={icon} alt="Tech/Tool" className="w-6 h-6" />
          ))}
        </div>

        {/* Eye Icon */}
        {hoveredProjectId === project.id && (
          <div className="eye-icon">
            <motion.img src={peek_icon} alt="View" />
          </div>
        )}
      </div>
      <h3 className="text-2xl font-bold text-orange-400">{project.title}</h3>
      <p className="project-description text-white mb-6 text-lg">
        {project.hook}
      </p>

      {/* Tags */}
      <div className="tag-container">
        {project.tags?.map((tag, index) => (
          <span key={index} className="tag flex items-center gap-2">
            <img src={tag_icon} alt="Tag Logo" className="w-4 h-4 mr-1" />
            {tag}
          </span>
        ))}
      </div>
    </motion.div>
  );
};

export default ProjectCard;