import React from 'react';
import { render, screen } from '@testing-library/react';
import '@testing-library/jest-dom';
import { CarouselItem } from '../CarouselItem';

describe('CarouselItem', () => {
  it('renders children correctly', () => {
    render(
      <CarouselItem>
        <div>Test Content</div>
      </CarouselItem>
    );

    expect(screen.getByText('Test Content')).toBeInTheDocument();
  });

  it('applies custom className', () => {
    const { container } = render(
      <CarouselItem className="custom-class">
        <div>Test Content</div>
      </CarouselItem>
    );

    expect(container.firstChild).toHaveClass('custom-class');
  });

  it('uses default widthConfig when not provided', () => {
    const { container } = render(
      <CarouselItem>
        <div>Test Content</div>
      </CarouselItem>
    );

    expect(container.firstChild).toBeInTheDocument();
  });

  it('accepts custom widthConfig', () => {
    render(
      <CarouselItem
        widthItemConfig={{
          xs: '70%',
          mobile: '90%',
          tablet: '45%',
          desktop: '30%',
          xl: '25%'
        }}
      >
        <div>Test Content</div>
      </CarouselItem>
    );

    expect(screen.getByText('Test Content')).toBeInTheDocument();
  });

  it('accepts partial widthConfig', () => {
    render(
      <CarouselItem
        widthItemConfig={{
          mobile: '80%',
          desktop: '40%'
        }}
      >
        <div>Test Content</div>
      </CarouselItem>
    );

    expect(screen.getByText('Test Content')).toBeInTheDocument();
  });

  it('renders multiple children correctly', () => {
    render(
      <CarouselItem>
        <div>Child 1</div>
        <div>Child 2</div>
        <div>Child 3</div>
      </CarouselItem>
    );

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

  it('handles complex child components', () => {
    const ComplexChild = () => (
      <div>
        <h1>Title</h1>
        <p>Description</p>
        <button>Action</button>
      </div>
    );

    render(
      <CarouselItem>
        <ComplexChild />
      </CarouselItem>
    );

    expect(screen.getByText('Title')).toBeInTheDocument();
    expect(screen.getByText('Description')).toBeInTheDocument();
    expect(screen.getByText('Action')).toBeInTheDocument();
  });

  it('applies className along with widthConfig', () => {
    const { container } = render(
      <CarouselItem
        className="custom-item"
        widthItemConfig={{
          mobile: '90%',
          desktop: '45%'
        }}
      >
        <div>Test Content</div>
      </CarouselItem>
    );

    expect(container.firstChild).toHaveClass('custom-item');
    expect(screen.getByText('Test Content')).toBeInTheDocument();
  });

  it('renders with no props except children', () => {
    render(
      <CarouselItem>
        <div>Minimal Content</div>
      </CarouselItem>
    );

    expect(screen.getByText('Minimal Content')).toBeInTheDocument();
  });

  it('handles empty widthConfig object', () => {
    render(
      <CarouselItem widthItemConfig={{}}>
        <div>Test Content</div>
      </CarouselItem>
    );

    expect(screen.getByText('Test Content')).toBeInTheDocument();
  });
});