/**
 * Tests for SelectableCard component
 */

import { render, screen, fireEvent } from '@testing-library/react';
import { SelectableCard } from '@/components/projects/wizard/SelectableCard';

describe('SelectableCard', () => {
  const defaultProps = {
    selected: false,
    onClick: jest.fn(),
    children: <span>Card Content</span>,
  };

  beforeEach(() => {
    jest.clearAllMocks();
  });

  it('renders children', () => {
    render(<SelectableCard {...defaultProps} />);
    expect(screen.getByText('Card Content')).toBeInTheDocument();
  });

  it('calls onClick when clicked', () => {
    render(<SelectableCard {...defaultProps} />);
    fireEvent.click(screen.getByRole('button'));
    expect(defaultProps.onClick).toHaveBeenCalledTimes(1);
  });

  it('has aria-pressed false when not selected', () => {
    render(<SelectableCard {...defaultProps} />);
    expect(screen.getByRole('button')).toHaveAttribute('aria-pressed', 'false');
  });

  it('has aria-pressed true when selected', () => {
    render(<SelectableCard {...defaultProps} selected={true} />);
    expect(screen.getByRole('button')).toHaveAttribute('aria-pressed', 'true');
  });

  it('applies custom aria-label', () => {
    render(<SelectableCard {...defaultProps} aria-label="Select option A" />);
    expect(screen.getByRole('button')).toHaveAttribute('aria-label', 'Select option A');
  });

  it('applies custom className', () => {
    render(<SelectableCard {...defaultProps} className="my-custom-class" />);
    expect(screen.getByRole('button')).toHaveClass('my-custom-class');
  });

  it('applies selected styles when selected', () => {
    const { rerender } = render(<SelectableCard {...defaultProps} />);
    const button = screen.getByRole('button');

    expect(button).toHaveClass('border-border');
    expect(button).not.toHaveClass('border-primary');

    rerender(<SelectableCard {...defaultProps} selected={true} />);
    expect(button).toHaveClass('border-primary');
  });
});