import React from 'react';
import { render, screen } from '@testing-library/react';
import { describe, it, expect, vi } from 'vitest';
import EventLogo from '../components/EventLogo';
import { EventBrandingProvider } from '@/guest/context/EventBrandingContext';
import type { EventBranding } from '@/guest/types/event-branding';

vi.mock('@tamagui/stacks', () => ({
  YStack: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
}));

vi.mock('@tamagui/text', () => ({
  SizableText: ({ children }: { children: React.ReactNode }) => <span>{children}</span>,
}));

const baseBranding: EventBranding = {
  primaryColor: '#ff5a5f',
  secondaryColor: '#fbcfe8',
  backgroundColor: '#fff7f5',
  fontFamily: null,
  logoUrl: null,
  logo: {
    mode: 'emoticon',
    value: '🎉',
    size: 'm',
  },
  mode: 'auto',
};

describe('EventLogo', () => {
  it('renders an uploaded logo image when configured', () => {
    const branding: EventBranding = {
      ...baseBranding,
      logo: {
        mode: 'upload',
        value: 'https://example.com/logo.png',
        size: 'm',
      },
    };

    render(
      <EventBrandingProvider branding={branding}>
        <EventLogo name="Demo Event" />
      </EventBrandingProvider>
    );

    expect(screen.getByAltText('Demo Event')).toBeInTheDocument();
  });

  it('renders an emoji fallback when configured', () => {
    render(
      <EventBrandingProvider branding={baseBranding}>
        <EventLogo name="Demo Event" />
      </EventBrandingProvider>
    );

    expect(screen.getByText('🎉')).toBeInTheDocument();
  });
});