import { Edit, Trash2, ExternalLink } from "lucide-react";
import { T_projects } from "@/types/projects.type";
import { Link } from "react-router-dom";

interface ProjectCardProps {
  project: T_projects;
  onEdit: (project: T_projects) => void;
  onDelete: (id: string) => void;
}

export const ProjectCard = ({ project, onEdit, onDelete }: ProjectCardProps) => {
  return (
    <div className="glass p-6 rounded-xl flex justify-between items-start gap-4 hover:border-primary/50 transition-all duration-300">
      <div className="space-y-2">
        <h3 className="text-xl font-bold text-foreground flex items-center gap-2">
          {project.title}
          {project.isFeatured && (
            <span className="text-[10px] bg-primary/20 text-primary px-2 py-0.5 rounded-full border border-primary/30 uppercase tracking-wider">
              Featured
            </span>
          )}
        </h3>
        <p className="text-muted-foreground text-sm line-clamp-2">
          {project.description}
        </p>
        <div className="flex flex-wrap gap-2 mt-3">
          {project.technologies.slice(0, 4).map((tech) => (
            <span key={tech} className="text-xs bg-secondary px-2 py-1 rounded text-secondary-foreground">
              {tech}
            </span>
          ))}
        </div>
      </div>

      <div className="flex flex-col gap-2">
        <button
          onClick={() => onEdit(project)}
          className="p-2 rounded-lg bg-primary/10 text-primary hover:bg-primary hover:text-white transition-colors"
          title="Edit"
        >
          <Edit size={18} />
        </button>
        <button
          onClick={() => onDelete(project._id)}
          className="p-2 rounded-lg bg-destructive/10 text-destructive hover:bg-destructive hover:text-white transition-colors"
          title="Delete"
        >
          <Trash2 size={18} />
        </button>
        {project.liveLink && (
          <Link
            to={project.liveLink}
            target="_blank"
            className="p-2 rounded-lg bg-secondary text-muted-foreground hover:text-foreground transition-colors"
          >
            <ExternalLink size={18} />
          </Link>
        )}
      </div>
    </div>
  );
};