import * as React from 'react';
import { describe, it, expect, vi } from 'vitest';
import { render, screen } from '@testing-library/react';
import { ReferencesSlider, Reference } from './ReferencesSlider';

// Mock next/link to render standard <a> tag
vi.mock('next/link', () => ({
  default: vi.fn(({ children, href, onClick, ...props }: any) => {
    return (
      <a href={href} onClick={onClick} {...props}>
        {children}
      </a>
    );
  })
}));

// Mock next/image to render standard img tag
vi.mock('next/image', () => ({
  default: (props: any) => {
    return <img {...props} />;
  }
}));

// Mock next-intl
vi.mock('next-intl', () => ({
  useTranslations: () => (key: string) => key,
  useLocale: () => 'en',
  NextIntlClientProvider: ({ children }: any) => <>{children}</>
}));

describe('ReferencesSlider TDD', () => {
  const mockReferences: Reference[] = [
    {
      id: '1',
      title: 'Referenz Projekt Eins',
      slug: 'referenz-projekt-eins',
      category: 'Kabeltiefbau',
    },
    {
      id: '2',
      title: 'Referenz Projekt Zwei',
      slug: 'referenz-projekt-zwei',
      category: 'Bohrtechnik',
    }
  ];

  it('renders reference tiles correctly', () => {
    render(<ReferencesSlider references={mockReferences} />);
    
    expect(screen.getByText('Referenz Projekt Eins')).toBeTruthy();
    expect(screen.getByText('Referenz Projekt Zwei')).toBeTruthy();
  });

  it('renders each tile as a static block and NOT wrapped in a link', () => {
    render(<ReferencesSlider references={mockReferences} />);
    
    const links = screen.queryAllByTestId('reference-tile-link');
    expect(links).toHaveLength(0);

    const tiles = screen.getAllByTestId('reference-tile');
    expect(tiles).toHaveLength(2);
  });
});