import React from 'react';
import { render } from '@testing-library/react';
import '@testing-library/jest-dom';
import {
  BoatIcon,
  CalendarIcon,
  ChevronRightIcon,
  LocationIcon,
  MoonIcon
} from '../assets';

describe('Trip Cards Assets', () => {
  describe('BoatIcon', () => {
    it('renders correctly', () => {
      const { container } = render(<BoatIcon />);
      const svg = container.querySelector('svg');
      expect(svg).toBeInTheDocument();
    });

    it('has correct viewBox', () => {
      const { container } = render(<BoatIcon />);
      const svg = container.querySelector('svg');
      expect(svg).toHaveAttribute('viewBox');
    });

    it('accepts custom props', () => {
      const { container } = render(<BoatIcon className="custom-class" />);
      const svg = container.querySelector('svg');
      expect(svg).toHaveClass('custom-class');
    });

    it('has fill attribute', () => {
      const { container } = render(<BoatIcon />);
      const svg = container.querySelector('svg');
      expect(svg).toHaveAttribute('fill');
    });
  });

  describe('CalendarIcon', () => {
    it('renders correctly', () => {
      const { container } = render(<CalendarIcon />);
      const svg = container.querySelector('svg');
      expect(svg).toBeInTheDocument();
    });

    it('has correct viewBox', () => {
      const { container } = render(<CalendarIcon />);
      const svg = container.querySelector('svg');
      expect(svg).toHaveAttribute('viewBox');
    });

    it('accepts custom props', () => {
      const { container } = render(<CalendarIcon data-testid="calendar" />);
      const svg = container.querySelector('svg');
      expect(svg).toHaveAttribute('data-testid', 'calendar');
    });

    it('renders path elements', () => {
      const { container } = render(<CalendarIcon />);
      const paths = container.querySelectorAll('path');
      expect(paths.length).toBeGreaterThan(0);
    });
  });

  describe('ChevronRightIcon', () => {
    it('renders correctly', () => {
      const { container } = render(<ChevronRightIcon />);
      const svg = container.querySelector('svg');
      expect(svg).toBeInTheDocument();
    });

    it('has correct dimensions', () => {
      const { container } = render(<ChevronRightIcon />);
      const svg = container.querySelector('svg');
      expect(svg).toHaveAttribute('width', '16');
      expect(svg).toHaveAttribute('height', '16');
    });

    it('has correct viewBox', () => {
      const { container } = render(<ChevronRightIcon />);
      const svg = container.querySelector('svg');
      expect(svg).toHaveAttribute('viewBox', '0 0 16 16');
    });

    it('renders with currentColor stroke', () => {
      const { container } = render(<ChevronRightIcon />);
      const path = container.querySelector('path');
      expect(path).toHaveAttribute('stroke', 'currentColor');
    });

    it('accepts custom props', () => {
      const { container } = render(
        <ChevronRightIcon style={{ color: 'red' }} />
      );
      const svg = container.querySelector('svg');
      expect(svg).toHaveStyle({ color: 'red' });
    });
  });

  describe('LocationIcon', () => {
    it('renders correctly', () => {
      const { container } = render(<LocationIcon />);
      const svg = container.querySelector('svg');
      expect(svg).toBeInTheDocument();
    });

    it('has correct viewBox', () => {
      const { container } = render(<LocationIcon />);
      const svg = container.querySelector('svg');
      expect(svg).toHaveAttribute('viewBox');
    });

    it('accepts custom props', () => {
      const { container } = render(<LocationIcon aria-label="location" />);
      const svg = container.querySelector('svg');
      expect(svg).toHaveAttribute('aria-label', 'location');
    });

    it('renders path elements', () => {
      const { container } = render(<LocationIcon />);
      const path = container.querySelector('path');
      expect(path).toBeInTheDocument();
    });
  });

  describe('MoonIcon', () => {
    it('renders correctly', () => {
      const { container } = render(<MoonIcon />);
      const svg = container.querySelector('svg');
      expect(svg).toBeInTheDocument();
    });

    it('has correct viewBox', () => {
      const { container } = render(<MoonIcon />);
      const svg = container.querySelector('svg');
      expect(svg).toHaveAttribute('viewBox');
    });

    it('has correct dimensions', () => {
      const { container } = render(<MoonIcon />);
      const svg = container.querySelector('svg');
      expect(svg).toHaveAttribute('width');
      expect(svg).toHaveAttribute('height');
    });

    it('accepts custom props', () => {
      const { container } = render(<MoonIcon id="moon-icon" />);
      const svg = container.querySelector('svg');
      expect(svg).toHaveAttribute('id', 'moon-icon');
    });

    it('renders path with fill color', () => {
      const { container } = render(<MoonIcon />);
      const path = container.querySelector('path');
      expect(path).toHaveAttribute('fill');
    });
  });

  describe('Icons Integration', () => {
    it('all icons render without errors', () => {
      const { container } = render(
        <div>
          <BoatIcon />
          <CalendarIcon />
          <ChevronRightIcon />
          <LocationIcon />
          <MoonIcon />
        </div>
      );

      const svgs = container.querySelectorAll('svg');
      expect(svgs.length).toBe(5);
    });

    it('icons can be styled with className', () => {
      const { container } = render(
        <div>
          <BoatIcon className="icon-style" />
          <CalendarIcon className="icon-style" />
          <LocationIcon className="icon-style" />
        </div>
      );

      const svgs = container.querySelectorAll('.icon-style');
      expect(svgs.length).toBe(3);
    });

    it('icons maintain SVG structure', () => {
      const icons = [
        <BoatIcon key="boat" />,
        <CalendarIcon key="calendar" />,
        <ChevronRightIcon key="chevron" />,
        <LocationIcon key="location" />,
        <MoonIcon key="moon" />
      ];

      icons.forEach(icon => {
        const { container } = render(icon);
        const svg = container.querySelector('svg');
        if (svg) {
          expect(svg.tagName).toBe('svg');
        }
      });
    });
  });
});