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

const sampleStone: Stone = {
  id: 1,
  name: 'Akik',
  image: '/uploads/stones/akik.jpg',
  active: true,
};

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

describe('StoneCard', () => {
  it('renders stone name', () => {
    renderWithDnd(<StoneCard stone={sampleStone} />);
    expect(screen.getByText('Akik')).toBeInTheDocument();
  });

  it('renders stone image with alt text', () => {
    renderWithDnd(<StoneCard stone={sampleStone} />);
    const img = screen.getByAltText('Akik');
    expect(img).toBeInTheDocument();
    expect(img).toHaveAttribute('src', '/uploads/stones/akik.jpg');
  });

  it('has draggable attributes', () => {
    renderWithDnd(<StoneCard stone={sampleStone} />);
    const card = screen.getByText('Akik').closest('[role="button"]');
    expect(card).toBeInTheDocument();
  });
});
