import { ChevronUp, ChevronDown } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { cn } from '@/lib/utils';

interface ReorderButtonsProps {
  onMoveUp: () => void;
  onMoveDown: () => void;
  isFirst: boolean;
  isLast: boolean;
  disabled?: boolean;
  size?: 'sm' | 'xs';
  className?: string;
}

export function ReorderButtons({
  onMoveUp,
  onMoveDown,
  isFirst,
  isLast,
  disabled = false,
  size = 'sm',
  className,
}: ReorderButtonsProps) {
  const iconSize = size === 'xs' ? 'h-3 w-3' : 'h-4 w-4';
  const btnSize = size === 'xs' ? 'h-5 w-5' : 'h-6 w-6';

  return (
    <div className={cn('flex flex-col', className)}>
      <Button
        type="button"
        variant="ghost"
        size="icon"
        className={cn(btnSize, 'p-0')}
        disabled={disabled || isFirst}
        onClick={(e) => {
          e.stopPropagation();
          e.preventDefault();
          onMoveUp();
        }}
      >
        <ChevronUp className={iconSize} />
        <span className="sr-only">위로 이동</span>
      </Button>
      <Button
        type="button"
        variant="ghost"
        size="icon"
        className={cn(btnSize, 'p-0')}
        disabled={disabled || isLast}
        onClick={(e) => {
          e.stopPropagation();
          e.preventDefault();
          onMoveDown();
        }}
      >
        <ChevronDown className={iconSize} />
        <span className="sr-only">아래로 이동</span>
      </Button>
    </div>
  );
}
