import React from 'react';
import { Link } from 'react-router-dom';
import { ArrowUpRightIcon } from '@phosphor-icons/react';
import { motion } from 'framer-motion';
import GenerativeArt from './GenerativeArt';

const ProjectTile = ({ project }) => {
  return (
    <motion.div
      whileHover={{ y: -5 }}
      className="group relative flex flex-col overflow-hidden rounded-sm bg-zinc-900 border border-white/10"
    >
      <Link to={`/projects/${project.slug}`} className="flex flex-col h-full">
        {/* Image Container */}
        <div className="relative aspect-[4/3] w-full overflow-hidden">
          <GenerativeArt
            seed={project.title}
            className="w-full h-full transition-transform duration-700 ease-out group-hover:scale-105"
          />

          {/* Overlay Tag */}
          <div className="absolute top-3 left-3">
            <span className="px-2 py-1 text-[10px] font-mono font-bold uppercase tracking-widest text-white bg-black/50 backdrop-blur-md rounded border border-white/10">
              {project.slug.split('-')[0]}
            </span>
          </div>

          {/* Hover Button */}
          <div className="absolute top-3 right-3 opacity-0 translate-y-2 transition-all duration-300 group-hover:opacity-100 group-hover:translate-y-0">
            <div className="flex h-8 w-8 items-center justify-center rounded-full bg-white text-black shadow-lg">
              <ArrowUpRightIcon weight="bold" size={16} />
            </div>
          </div>
        </div>

        {/* Content */}

        <div className="flex flex-col flex-grow p-5">
          <h3 className="text-xl font-medium font-sans uppercase text-white mb-2 group-hover:text-emerald-400 transition-colors line-clamp-1">
            {project.title}
          </h3>
          <p className="text-sm text-gray-400 line-clamp-2 leading-relaxed mb-4 flex-grow font-arvo">
            {' '}
            {project.shortDescription}
          </p>

          {/* Tech Stack */}

          <div className="flex flex-wrap gap-2 mt-auto">
            {project.technologies &&
              project.technologies.slice(0, 3).map((tech) => (
                <span
                  key={tech}
                  className="text-[10px] font-mono text-gray-500 uppercase tracking-wider border border-white/10 px-1.5 py-0.5 rounded group-hover:text-emerald-500 group-hover:border-emerald-500/30 transition-colors"
                >
                  {tech}
                </span>
              ))}
          </div>
        </div>
      </Link>
    </motion.div>
  );
};

export default ProjectTile;