/**
 * Tests for the TicketPrizeDisplay component
 * @jest-environment jsdom
 */

import React from 'react';
import { render, screen } from '@testing-library/react';
import { TicketPrizeDisplay } from '@/components/ui/TicketPrizeDisplay';

describe('TicketPrizeDisplay', () => {
  it('should render prize name for INFUSEUR', () => {
    render(<TicketPrizeDisplay prizeType="INFUSEUR" />);
    expect(screen.getByText('Infuseur à thé')).toBeInTheDocument();
  });

  it('should render prize name for THE_SIGNATURE', () => {
    render(<TicketPrizeDisplay prizeType="THE_SIGNATURE" />);
    expect(screen.getByText('Thé signature 100g')).toBeInTheDocument();
  });

  it('should render prize name for COFFRET_DECOUVERTE', () => {
    render(<TicketPrizeDisplay prizeType="COFFRET_DECOUVERTE" />);
    expect(screen.getByText('Coffret découverte 39€')).toBeInTheDocument();
  });

  it('should render prize name for COFFRET_PRESTIGE', () => {
    render(<TicketPrizeDisplay prizeType="COFFRET_PRESTIGE" />);
    expect(screen.getByText('Coffret prestige 69€')).toBeInTheDocument();
  });

  it('should render prize name for THE_GRATUIT', () => {
    render(<TicketPrizeDisplay prizeType="THE_GRATUIT" />);
    expect(screen.getByText('Thé gratuit en magasin')).toBeInTheDocument();
  });

  it('should render icon for each prize type', () => {
    const { container } = render(<TicketPrizeDisplay prizeType="INFUSEUR" />);
    const svg = container.querySelector('svg');
    expect(svg).toBeInTheDocument();
  });

  it('should return null for unknown prize type', () => {
    const { container } = render(<TicketPrizeDisplay prizeType="UNKNOWN_PRIZE" />);
    expect(container.firstChild).toBeNull();
  });

  it('should apply custom className', () => {
    const { container } = render(
      <TicketPrizeDisplay prizeType="INFUSEUR" className="custom-class" />
    );
    expect(container.firstChild).toHaveClass('custom-class');
  });

  it('should render with prize color styling', () => {
    const { container } = render(<TicketPrizeDisplay prizeType="INFUSEUR" />);
    const iconContainer = container.querySelector('.rounded-full');
    expect(iconContainer).toBeInTheDocument();
  });

  it('should have flex layout with gap', () => {
    const { container } = render(<TicketPrizeDisplay prizeType="INFUSEUR" />);
    expect(container.firstChild).toHaveClass('flex');
    expect(container.firstChild).toHaveClass('items-center');
    expect(container.firstChild).toHaveClass('gap-3');
  });

  it('should render prize name with correct text styling', () => {
    render(<TicketPrizeDisplay prizeType="INFUSEUR" />);
    const nameElement = screen.getByText('Infuseur à thé');
    expect(nameElement).toHaveClass('text-sm');
    expect(nameElement).toHaveClass('font-medium');
  });
});