import React from 'react';
import { motion } from 'framer-motion';
import { ExternalLink } from 'lucide-react';
import { FaGithub } from 'react-icons/fa';
import type { Project } from '../../../shared/types';

interface ProjectCardProps {
  project: Project;
  index: number;
}

export const ProjectCard: React.FC<ProjectCardProps> = ({ project, index }) => {
  return (
    <motion.div
      layout
      initial={{ opacity: 0, y: 22 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true }}
      transition={{ duration: 0.45, delay: index * 0.08, ease: 'easeOut' }}
      whileHover={{ y: -8, scale: 1.01 }}
      className="rounded-3xl overflow-hidden border border-green-500/25 bg-gradient-to-br from-green-500/5 to-emerald-500/5 backdrop-blur-sm"
    >
      {/* Image */}
      <div className="relative h-64 overflow-hidden bg-gradient-to-br from-gray-900 to-black">
        <motion.img
          src={project.image}
          alt={project.title}
          className="w-full h-full object-cover"
          whileHover={{ scale: 1.1 }}
          transition={{ duration: 0.5 }}
        />
        <div className="absolute inset-0 bg-gradient-to-t from-black/85 to-transparent"></div>
      </div>

      {/* Content */}
      <div className="p-6">
        <motion.div
          className="inline-flex items-center gap-2 mb-4 px-3 py-1 rounded-full bg-green-500/15 border border-green-500/25"
          whileHover={{ scale: 1.05 }}
          transition={{ type: 'spring', stiffness: 300 }}
        >
          <span className="text-green-400 text-xs font-semibold">{project.category}</span>
        </motion.div>

        <h3 className="text-2xl font-bold text-white mb-3">{project.title}</h3>
        <p className="text-gray-400 text-sm mb-5 line-clamp-3">{project.description}</p>

        <div className="flex flex-wrap gap-2 mb-6">
          {project.tags.slice(0, 3).map((tag) => (
            <motion.span
              key={tag}
              whileHover={{ scale: 1.05, backgroundColor: 'rgba(34,197,94,0.2)' }}
              transition={{ type: 'spring', stiffness: 300 }}
              className="text-xs px-2 py-1 rounded-full border border-green-500/25 text-green-300 bg-white/5"
            >
              {tag}
            </motion.span>
          ))}
          {project.tags.length > 3 && (
            <span className="text-xs px-2 py-1 rounded-full text-gray-400 bg-gray-900/40">
              +{project.tags.length - 3}
            </span>
          )}
        </div>

        <div className="flex flex-wrap gap-3">
          {project.link && (
            <motion.a
              href={project.link}
              target="_blank"
              rel="noreferrer"
              whileHover={{ scale: 1.05, backgroundColor: 'rgba(34,197,94,0.3)' }}
              whileTap={{ scale: 0.95 }}
              className="inline-flex items-center gap-2 px-4 py-2 rounded-2xl bg-green-500/20 text-green-300 text-sm font-medium"
            >
              <ExternalLink size={16} />
              Live
            </motion.a>
          )}
          {project.github && (
            <motion.a
              href={project.github}
              target="_blank"
              rel="noreferrer"
              whileHover={{ scale: 1.05, borderColor: 'rgba(34,197,94,0.5)', color: '#ffffff' }}
              whileTap={{ scale: 0.95 }}
              className="inline-flex items-center gap-2 px-4 py-2 rounded-2xl border border-green-500/25 text-gray-300 text-sm font-medium"
            >
              <FaGithub size={16} />
              Code
            </motion.a>
          )}
        </div>
      </div>
    </motion.div>
  );
};
