ui-dnd/e2e/components/TestSortableList.tsx

/**
 * Test wrapper component for SortableList
 */

import { useState } from 'react';
import { SortableList } from '../../src/SortableList';

export interface TestSortableListProps {
  initialItems: string[];
  direction?: 'vertical' | 'horizontal';
}

export function TestSortableList({ initialItems, direction = 'vertical' }: TestSortableListProps) {
  const [items, setItems] = useState(initialItems);

  return (
    <div style={{ padding: '20px' }}>
      <SortableList
        items={items}
        getItemKey={(item) => item}
        renderItem={(item, index, isDragging) => (
          <div
            data-testid={`item-${item}`}
            data-dragging={isDragging}
            data-index={index}
            style={{
              padding: '16px 24px',
              background: isDragging ? '#e0e0ff' : '#f0f0f0',
              border: '1px solid #ccc',
              borderRadius: '4px',
              cursor: 'grab',
              userSelect: 'none',
              minWidth: direction === 'horizontal' ? '80px' : undefined,
            }}
          >
            {item}
          </div>
        )}
        onReorder={setItems}
        direction={direction}
        gap={8}
      />
      <div data-testid="current-order">{items.join(',')}</div>
    </div>
  );
}