import Link from 'next/link';
import { Project } from '@/lib/content';
import { Github, ExternalLink, Code } from 'lucide-react';

interface ProjectCardProps {
  project: Project;
}

export function ProjectCard({ project }: ProjectCardProps) {
  return (
    <article className="group rounded-lg border border-border/40 bg-card p-6 transition-all hover:border-border hover:shadow-lg">
      <h3 className="text-2xl font-semibold text-foreground mb-3">
        {project.title}
      </h3>
      <p className="text-base text-muted-foreground mb-4">
        {project.description}
      </p>
      <div className="flex gap-4 mt-4">
        {project.links?.github && (
          <a
            href={project.links.github}
            target="_blank"
            rel="noopener noreferrer"
            className="flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground transition-colors"
          >
            <Github size={16} />
            GitHub
          </a>
        )}
        {project.links?.gitea && (
          <a
            href={project.links.gitea}
            target="_blank"
            rel="noopener noreferrer"
            className="flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground transition-colors"
          >
            <Code size={16} />
            Gitea
          </a>
        )}
        {project.links?.live && (
          <a
            href={project.links.live}
            target="_blank"
            rel="noopener noreferrer"
            className="flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground transition-colors"
          >
            <ExternalLink size={16} />
            Live Demo
          </a>
        )}
      </div>
    </article>
  );
}