import { FunctionComponent } from 'react';
import { fireEvent, render, screen } from '@testing-library/react';
import { ThemeProvider } from '../../theme';
import CategoryTile, { CategoryTileProps } from './CategoryTile';

const ComponentToTest: FunctionComponent<CategoryTileProps> = (props) => (
  <ThemeProvider>
    <CategoryTile {...props} />
  </ThemeProvider>
);

describe('<CategoryTile/> component', () => {
  it('renders the localised label', () => {
    render(<ComponentToTest label="Elderly Care" />);
    expect(screen.getByText('Elderly Care')).toBeInTheDocument();
  });

  it('renders a known category icon for a mapped iconKey', () => {
    const { container } = render(<ComponentToTest label="Elderly Care" iconKey="elderly" />);
    expect(container.querySelector('[data-icon="elderly"]')).toBeInTheDocument();
  });

  it('falls back to the generic category icon for an unknown or missing iconKey', () => {
    const { container } = render(<ComponentToTest label="Something" iconKey="unmapped_key" />);
    expect(container.querySelector('[data-icon="category"]')).toBeInTheDocument();
  });

  it('calls onClick when tapped', () => {
    const onClick = jest.fn();
    render(<ComponentToTest label="Infant Care" iconKey="infant" onClick={onClick} />);
    fireEvent.click(screen.getByRole('button'));
    expect(onClick).toHaveBeenCalledTimes(1);
  });

  it('exposes its selected state for the builder category step', () => {
    render(<ComponentToTest label="Elderly Care" iconKey="elderly" selected />);
    expect(screen.getByRole('button')).toHaveAttribute('aria-pressed', 'true');
  });
});
