import React from "react";
import { useSortable } from "@dnd-kit/sortable";
import { CSS } from "@dnd-kit/utilities";
import { Box } from "@mui/material";
import { DragIndicator } from "@mui/icons-material";

export interface SortableFilterItemProps {
  id: string;
  containerId: string;
  children: React.ReactNode;
}

const DraggableListItem = ({
  id,
  containerId,
  children,
}: SortableFilterItemProps) => {
  const {
    attributes,
    listeners,
    setNodeRef,
    transform,
    transition,
    isDragging,
  } = useSortable({
    id,
    data: {
      type: "filter-item",
      containerId,
      id,
    },
  });

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

  return (
    <Box
      ref={setNodeRef}
      style={style}
      {...attributes}
      sx={{
        display: "flex",
        alignItems: "center",
        justifyContent: "space-between",
        "&:hover": { bgcolor: "#f5f5f5" },
        borderRadius: 1,
        marginBottom: 1,
        cursor: isDragging ? "grabbing" : "default",
        boxShadow: isDragging ? "0 2px 8px rgba(0,0,0,0.1)" : "none",
      }}
    >
      <Box
        {...listeners}
        sx={{ cursor: "grab", display: "flex", alignItems: "center" }}
      >
        <DragIndicator sx={{ mr: 1, color: "#ccc" }} />
      </Box>
      {children}
    </Box>
  );
};

export default DraggableListItem;