import { describe, it, expect } from 'vitest';
import { render, screen } from '@testing-library/react';
import { DndContext } from '@dnd-kit/core';
import StoneGrid from './StoneGrid';
import type { Stone } from '../types';

const stones: Stone[] = [
  { id: 1, name: 'Akik', image: '/uploads/stones/akik.jpg', active: true },
  { id: 2, name: 'Ametist', image: '/uploads/stones/ametist.jpg', active: true },
];

function renderWithDnd(ui: React.ReactElement) {
  return render(<DndContext>{ui}</DndContext>);
}

describe('StoneGrid', () => {
  it('renders all stones in a two-column grid', () => {
    renderWithDnd(<StoneGrid stones={stones} />);
    expect(screen.getByText('Akik')).toBeInTheDocument();
    expect(screen.getByText('Ametist')).toBeInTheDocument();
  });

  it('applies two-column grid layout', () => {
    const { container } = renderWithDnd(<StoneGrid stones={stones} />);
    const grid = container.querySelector('.grid-cols-2');
    expect(grid).toBeInTheDocument();
  });

  it('shows empty message when no stones', () => {
    renderWithDnd(<StoneGrid stones={[]} />);
    expect(screen.getByText('Sonuç bulunamadı')).toBeInTheDocument();
  });
});
