ui-dnd/e2e/components/TestSortableGrid.tsx

/**
 * Test wrapper component for SortableGrid
 */

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

export interface TestSortableGridProps {
  initialItems: string[];
  columns?: number;
}

export function TestSortableGrid({ initialItems, columns = 3 }: TestSortableGridProps) {
  const [items, setItems] = useState(initialItems);

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