"use client";

import React from "react";
import { useDraggable } from "@dnd-kit/core";
import { CSS } from "@dnd-kit/utilities";
import { Card, CardContent, Typography } from "@mui/material";
import { DraggableItemProps } from "../types";

export function DraggableItem({ item, isDragging }: DraggableItemProps) {
  const {
    attributes,
    listeners,
    setNodeRef,
    transform,
    isDragging: isItemDragging,
  } = useDraggable({
    id: item.id,
  });

  const style = {
    transform: CSS.Translate.toString(transform),
    opacity: isItemDragging || isDragging ? 0.5 : 1,
  };

  return (
    <Card
      ref={setNodeRef}
      style={style}
      {...attributes}
      {...listeners}
      className="matcher-board__item"
      sx={{
        mb: 1,
        cursor: "grab",
        "&:active": {
          cursor: "grabbing",
        },
        "&:hover": {
          boxShadow: 3,
        },
      }}
    >
      <CardContent sx={{ p: 1.5, "&:last-child": { pb: 1.5 } }}>
        <Typography variant="body2" fontWeight={500}>
          {item.name}
        </Typography>
        {item.id && (
          <Typography variant="caption" color="text.secondary">
            ID: {item.id}
          </Typography>
        )}
      </CardContent>
    </Card>
  );
}