// src/components/portfolio/SortableImageItem.tsx
"use client";

import { PortfolioImage } from "@/generated/prisma";
import { useSortable } from "@dnd-kit/sortable";
import { CSS } from "@dnd-kit/utilities";
import Image from "next/image";

interface Props {
  id: string;
  image: PortfolioImage;
}

export default function SortableImageItem({ id, image }: Props) {
  const {
    attributes,
    listeners,
    setNodeRef,
    transform,
    transition,
    isDragging,
  } = useSortable({ id });

  const style = {
    transform: CSS.Transform.toString(transform),
    transition,
    opacity: isDragging ? 0.4 : 1,
  };

  return (
    <div
      ref={setNodeRef}
      {...attributes}
      {...listeners}
      style={style}
      className="bg-white rounded border overflow-hidden shadow hover:shadow-md transition"
    >
      <Image
        src={`/api/image/thumbnail/${image.fileKey}.wepb`}
        alt={image.altText ?? image.name}
        width={300}
        height={200}
        className="object-cover w-full h-48"
      />
      <div className="px-2 py-1 text-sm text-center truncate">{image.name}</div>
    </div>
  );
}