import Image from "next/image";
import AdminDataGrid from "@/components/admin/AdminDataGrid";
import AdminEditDeleteButtons from "@/components/admin/AdminEditDeleteButtons";

interface Project {
  id?: number;
  name: string;
  description: string;
  shortDescription?: string;
  coverImage: string;
  galleryImages: string[];
}

interface ProjectListProps {
  projects: Project[];
  onEdit: (project: Project) => void;
  onDelete: (id: number) => void;
}

export default function ProjectList({ projects, onEdit, onDelete }: ProjectListProps) {
  return (
    <AdminDataGrid columns={3} gap="md">
      {projects.map((project) => (
        <div
          key={project.id}
          className="group relative overflow-hidden rounded-lg border border-slate-800 bg-slate-900/60 transition-colors hover:border-slate-700"
        >
          <div className="relative h-40 w-full overflow-hidden bg-slate-800">
            <Image
              src={project.coverImage.replace("/uploads/", "/api/uploads/")}
              alt={project.name}
              fill
              sizes="(max-width: 768px) 100vw, 33vw"
              className="object-cover"
            />
            <div className="absolute right-2 top-2 opacity-0 transition-opacity group-hover:opacity-100">
              <div className="rounded-md bg-slate-950/80 p-0.5 backdrop-blur">
                <AdminEditDeleteButtons
                  onEdit={() => onEdit(project)}
                  onDelete={() => onDelete(project.id!)}
                  size="sm"
                />
              </div>
            </div>
          </div>
          <div className="p-4">
            <h3 className="mb-1 truncate text-sm font-semibold text-slate-100">
              {project.name}
            </h3>
            <p className="line-clamp-2 text-xs text-slate-400">
              {project.shortDescription || project.description.replace(/<[^>]+>/g, "")}
            </p>
          </div>
        </div>
      ))}
    </AdminDataGrid>
  );
}
