import { motion } from 'framer-motion';
import { Link } from 'react-router-dom';
import { ArrowRight } from 'lucide-react';
import { useSettings } from '@/contexts/SettingsContext';

const projects = [
  {
    slug: 'personal-website',
    title: 'Personal Website',
    description: 'This Matrix-themed personal website with retro hacker aesthetics.',
    status: 'Complete',
  },
  {
    slug: '3-way-speakers',
    title: '3 Way Speakers',
    description: 'Building custom 3-way speaker system with crossover design.',
    status: 'Complete',
  },
  {
    slug: 'xray-machine',
    title: 'X-Ray Machine',
    description: 'DIY X-ray machine project for educational purposes.',
    status: 'In Progress',
  },
  {
    slug: 'dj-mixing-visualizer',
    title: 'Automated DJ Mixing & Visualizer',
    description: 'Automated DJ mixing script with audio visualizer XY mode.',
    status: 'In Progress',
  },
  {
    slug: 'vps-infrastructure',
    title: 'VPS Server Infrastructure',
    description: 'Self-hosted VPS with authoritative nameserver, git, password manager, mail, reverse proxy and VPN.',
    status: 'Complete',
  },
];

const Projects = () => {
  const { playSound } = useSettings();

  const statusColor = (status: string) => {
    return {
      'Complete': 'text-green-400 border-green-400',
      'In Progress': 'text-yellow-400 border-yellow-400',
      'Planning': 'text-blue-400 border-blue-400',
    }[status] || 'text-primary border-primary';
  };

  return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      transition={{ duration: 0.5 }}
      className="space-y-6"
    >
      <h1 className="font-minecraft text-3xl md:text-4xl text-primary text-glow-strong">
        Projects
      </h1>
      
      <p className="font-pixel text-foreground/80">
        Here are some of the things I've been working on:
      </p>

      <div className="grid gap-4">
        {projects.map((project, index) => (
          <motion.div
            key={project.slug}
            initial={{ opacity: 0, x: -20 }}
            animate={{ opacity: 1, x: 0 }}
            transition={{ delay: index * 0.1 }}
          >
            <Link
              to={`/projects/${project.slug}`}
              onClick={() => playSound('click')}
              onMouseEnter={() => playSound('hover')}
              className="group block p-4 border border-primary/30 hover:border-primary transition-all duration-300 hover:box-glow"
            >
              <div className="flex justify-between items-start mb-2">
                <h2 className="font-minecraft text-xl text-primary text-glow group-hover:text-glow-strong transition-all">
                  {project.title}
                </h2>
                <span className={`font-pixel text-xs px-2 py-1 border ${statusColor(project.status)}`}>
                  {project.status}
                </span>
              </div>
              <p className="font-pixel text-foreground/80 mb-3">{project.description}</p>
              <div className="flex items-center gap-2 font-pixel text-sm text-primary opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                <span>View Details</span>
                <ArrowRight size={14} />
              </div>
            </Link>
          </motion.div>
        ))}
      </div>
    </motion.div>
  );
};

export default Projects;