import { Button } from "@repo/shadcn-ui/components/button";
import type { ComponentProps } from "react";

import { GripVerticalIcon } from "../lib/icons";

/** Asa con nombre traducido; el consumidor aporta los eventos de arrastre y teclado. */
export function ReorderHandle({
  label,
  ...props
}: Pick<
  ComponentProps<typeof Button>,
  "draggable" | "disabled" | "onDragStart" | "onDragEnd" | "onKeyDown" | "aria-describedby"
> & {
  label: string;
}) {
  return (
    <Button
      {...props}
      aria-label={label}
      className="shrink-0 cursor-grab touch-auto text-muted-foreground active:cursor-grabbing"
      size="icon-sm"
      title={label}
      type="button"
      variant="ghost"
    >
      <GripVerticalIcon aria-hidden="true" />
    </Button>
  );
}