import { render, screen } from '@testing-library/react';
import { describe, it, expect, vi } from 'vitest';
import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselPrevious,
  CarouselNext,
} from './carousel';
import React from 'react';

// Mock Embla
vi.mock('embla-carousel-react', () => ({
  default: () => [
    (node: HTMLElement) => node, // emblaRef
    {
      // api
      on: vi.fn(),
      off: vi.fn(),
      scrollPrev: vi.fn(),
      scrollNext: vi.fn(),
      canScrollPrev: () => true,
      canScrollNext: () => true,
      reInit: vi.fn(),
    },
  ],
}));

describe('Carousel', () => {
  it('renders correctly with items', () => {
    render(
      <Carousel>
        <CarouselContent>
          <CarouselItem>Item 1</CarouselItem>
          <CarouselItem>Item 2</CarouselItem>
        </CarouselContent>
        <CarouselPrevious />
        <CarouselNext />
      </Carousel>
    );

    expect(screen.getByText('Item 1')).toBeInTheDocument();
    expect(screen.getByText('Item 2')).toBeInTheDocument();
  });

  it('has correct data-slot attributes', () => {
    const { container } = render(
      <Carousel>
        <CarouselContent>
          <CarouselItem>Item</CarouselItem>
        </CarouselContent>
        <CarouselPrevious />
        <CarouselNext />
      </Carousel>
    );

    expect(container.querySelector('[data-slot="carousel"]')).toBeInTheDocument();
    expect(container.querySelector('[data-slot="carousel-content"]')).toBeInTheDocument();
    expect(container.querySelector('[data-slot="carousel-item"]')).toBeInTheDocument();
    expect(container.querySelector('[data-slot="carousel-previous"]')).toBeInTheDocument();
    expect(container.querySelector('[data-slot="carousel-next"]')).toBeInTheDocument();
  });

  it('accessibility roles are present', () => {
    const { container } = render(
      <Carousel>
        <CarouselContent>
          <CarouselItem>Item</CarouselItem>
        </CarouselContent>
      </Carousel>
    );
    expect(container.querySelector('[role="region"]')).toBeInTheDocument();
    expect(container.querySelector('[role="group"]')).toBeInTheDocument();
  });
});