import Image from "next/image";
import { ExternalLink, Github } from "lucide-react";
import { Link } from "@/lib/i18n/navigation";
import { Badge } from "@/components/ui/badge";
import { Card, CardContent } from "@/components/ui/card";
import type { FlatProject } from "@/lib/types";

interface ProjectCardProps {
  project: FlatProject;
  typeLabel?: string;
}

export function ProjectCard({ project, typeLabel }: ProjectCardProps) {
  return (
    <Link href={`/work/${project.slug}`} className="group block h-full">
      <Card className="h-full overflow-hidden">
        {project.coverImage ? (
          <div className="relative h-48 overflow-hidden">
            <Image
              src={project.coverImage}
              alt={project.title}
              fill
              className="object-cover transition-transform duration-300 group-hover:scale-105"
            />
          </div>
        ) : (
          <div className="h-48 bg-surface-hover flex items-center justify-center">
            <span className="font-mono text-2xl text-accent opacity-30">//</span>
          </div>
        )}

        <CardContent className="p-5">
          <div className="mb-3 flex items-center justify-between gap-2">
            <Badge variant="secondary">{typeLabel ?? project.projectType}</Badge>
            <div className="flex items-center gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
              {project.liveUrl && (
                <a
                  href={project.liveUrl}
                  target="_blank"
                  rel="noopener noreferrer"
                  onClick={(e) => e.stopPropagation()}
                  className="text-text-secondary hover:text-accent transition-colors"
                  aria-label="Live demo"
                >
                  <ExternalLink size={14} />
                </a>
              )}
              {project.githubUrl && (
                <a
                  href={project.githubUrl}
                  target="_blank"
                  rel="noopener noreferrer"
                  onClick={(e) => e.stopPropagation()}
                  className="text-text-secondary hover:text-accent transition-colors"
                  aria-label="GitHub"
                >
                  <Github size={14} />
                </a>
              )}
            </div>
          </div>

          <h3 className="mb-2 font-semibold text-text-primary group-hover:text-accent transition-colors">
            {project.title}
          </h3>

          {project.description && (
            <p className="text-sm text-text-secondary line-clamp-3">{project.description}</p>
          )}

          {project.techStack.length > 0 && (
            <div className="mt-4 flex flex-wrap gap-1.5">
              {project.techStack.slice(0, 4).map((tech) => (
                <span key={tech} className="rounded-full bg-surface-hover px-2 py-0.5 font-mono text-xs text-text-secondary">
                  {tech}
                </span>
              ))}
            </div>
          )}
        </CardContent>
      </Card>
    </Link>
  );
}
