import React from 'react';
import { render } from '@testing-library/react';
import { MaterialBadge } from '@/src/components/MaterialBadge';

describe('MaterialBadge', () => {
  describe('Material type badges', () => {
    it('renders PLA badge with correct style', () => {
      const { getByText } = render(<MaterialBadge base="PLA" />);
      const badge = getByText('PLA');
      expect(badge).toHaveClass('bg-green-100');
      expect(badge).toHaveClass('text-green-800');
    });

    it('renders PETG badge with correct style', () => {
      const { getByText } = render(<MaterialBadge base="PETG" />);
      const badge = getByText('PETG');
      expect(badge).toHaveClass('bg-blue-100');
      expect(badge).toHaveClass('text-blue-800');
    });

    it('renders ABS badge with correct style', () => {
      const { getByText } = render(<MaterialBadge base="ABS" />);
      const badge = getByText('ABS');
      expect(badge).toHaveClass('bg-red-100');
      expect(badge).toHaveClass('text-red-800');
    });

    it('renders TPU badge with correct style', () => {
      const { getByText } = render(<MaterialBadge base="TPU" />);
      const badge = getByText('TPU');
      expect(badge).toHaveClass('bg-purple-100');
      expect(badge).toHaveClass('text-purple-800');
    });
  });

  describe('Unknown material type', () => {
    it('renders unknown material with default style', () => {
      const { getByText } = render(<MaterialBadge base="UNKNOWN" />);
      const badge = getByText('UNKNOWN');
      expect(badge).toHaveClass('bg-gray-100');
      expect(badge).toHaveClass('text-gray-800');
    });
  });

  describe('With modifier', () => {
    it('renders base and modifier', () => {
      const { getByText } = render(<MaterialBadge base="PLA" modifier="Silk" />);
      expect(getByText('PLA')).toBeInTheDocument();
      expect(getByText('Silk')).toBeInTheDocument();
    });

    it('renders modifier with correct style', () => {
      const { getByText } = render(<MaterialBadge base="PLA" modifier="Matte" />);
      const modifier = getByText('Matte');
      expect(modifier).toHaveClass('bg-gray-100');
      expect(modifier).toHaveClass('text-gray-800');
    });
  });

  describe('Common styles', () => {
    it('has correct padding and shape', () => {
      const { getByText } = render(<MaterialBadge base="PLA" />);
      const badge = getByText('PLA');
      expect(badge).toHaveClass('px-2.5');
      expect(badge).toHaveClass('py-0.5');
      expect(badge).toHaveClass('rounded-full');
    });

    it('has correct text size', () => {
      const { getByText } = render(<MaterialBadge base="PLA" />);
      const badge = getByText('PLA');
      expect(badge).toHaveClass('text-xs');
    });

    it('has correct font weight', () => {
      const { getByText } = render(<MaterialBadge base="PLA" />);
      const badge = getByText('PLA');
      expect(badge).toHaveClass('font-medium');
    });

    it('accepts custom className', () => {
      const { container } = render(<MaterialBadge base="PLA" className="custom-class" />);
      const wrapper = container.firstChild;
      expect(wrapper).toHaveClass('custom-class');
    });
  });
});