import { GitBranch, Star, ExternalLink, Github } from 'lucide-react';

export default function ProjectCard({ project }) {
  return (
    <div className="brutal-card group">
      {/* Header */}
      <div className="flex items-start justify-between mb-4">
        <div className="flex items-center gap-3">
          <div className="w-12 h-12 bg-brutal-black flex items-center justify-center">
            <GitBranch size={24} className="text-brutal-white" />
          </div>
          <div>
            <h3 className="font-bold text-lg group-hover:text-brutal-accent transition-colors">
              {project.name}
            </h3>
            <p className="font-mono text-xs text-brutal-gray">{project.author}</p>
          </div>
        </div>
        
        {project.featured && (
          <span className="font-mono text-xs bg-brutal-accent text-brutal-white px-2 py-1">
            Featured
          </span>
        )}
      </div>

      {/* Description */}
      <p className="text-sm mb-4">{project.description}</p>

      {/* Tags */}
      <div className="flex flex-wrap gap-2 mb-4">
        {project.tags.map((tag) => (
          <span 
            key={tag} 
            className="font-mono text-xs border-2 border-brutal-black px-2 py-1"
          >
            {tag}
          </span>
        ))}
      </div>

      {/* Stats */}
      <div className="flex items-center gap-4 mb-4 pt-4 border-t-2 border-brutal-black/10">
        <div className="flex items-center gap-1">
          <Star size={16} />
          <span className="font-mono text-sm">{project.stars}</span>
        </div>
        <div className="flex items-center gap-1">
          <GitBranch size={16} />
          <span className="font-mono text-sm">{project.forks}</span>
        </div>
        <div className="flex items-center gap-1">
          <span className="font-mono text-sm text-brutal-gray">{project.language}</span>
        </div>
      </div>

      {/* Links */}
      <div className="flex gap-2">
        <a 
          href={project.repoUrl}
          target="_blank"
          rel="noopener noreferrer"
          className="brutal-btn flex-1 flex items-center justify-center gap-2"
        >
          <Github size={16} />
          <span>Repository</span>
        </a>
        <a 
          href={project.demoUrl}
          target="_blank"
          rel="noopener noreferrer"
          className="brutal-btn flex items-center justify-center gap-2"
        >
          <ExternalLink size={16} />
        </a>
      </div>
    </div>
  );
}