import { useSortable } from "@dnd-kit/sortable";
import { Button } from "@repo/shadcn-ui/components";
import { cn } from "@repo/shadcn-ui/lib/utils";
import { t } from "i18next";
import { GripVerticalIcon } from "lucide-react";

export interface DataTableRowDragHandleCellProps {
  rowId: string;
  className?: string;
}

export const DataTableRowDragHandleCell = ({
  rowId,
  className,
}: DataTableRowDragHandleCellProps) => {
  const { attributes, listeners, isDragging } = useSortable({
    id: rowId,
  });

  return (
    <Button
      onClick={(event) => {
        event.preventDefault();
        return;
      }}
      size='icon'
      variant='link'
      className={cn(
        isDragging ? "cursor-grabbing" : "cursor-grab",
        "w-4 h-4 mt-2 text-ring hover:text-muted-foreground",
        className
      )}
      {...attributes}
      {...listeners}
    >
      <GripVerticalIcon className='w-4 h-4' />
      <span className='sr-only'>{t("common.move_row")}</span>
    </Button>
  );
};