import React from 'react';
import { describe, expect, it, vi } from 'vitest';
import { render, screen } from '@testing-library/react';
import { MemoryRouter } from 'react-router-dom';
import GalleryPreview from '../GalleryPreview';

vi.mock('../../polling/usePollGalleryDelta', () => ({
  usePollGalleryDelta: () => ({
    photos: [],
    loading: false,
  }),
}));

vi.mock('../../i18n/useTranslation', () => ({
  useTranslation: () => ({
    locale: 'de',
  }),
}));

vi.mock('../../context/EventBrandingContext', () => ({
  useEventBranding: () => ({
    branding: {
      primaryColor: '#FF5A5F',
      secondaryColor: '#FFF8F5',
      buttons: { radius: 12, linkColor: '#FFF8F5' },
      typography: {},
      fontFamily: 'Montserrat',
    },
  }),
}));

describe('GalleryPreview', () => {
  it('renders dark mode-ready surfaces', () => {
    render(
      <MemoryRouter>
        <GalleryPreview token="demo" />
      </MemoryRouter>,
    );

    const card = screen.getByTestId('gallery-preview');
    expect(card.className).toContain('bg-[var(--guest-surface)]');
    expect(card.className).toContain('dark:bg-slate-950/70');

    const emptyState = screen.getByText(/Noch keine Fotos/i).closest('div');
    expect(emptyState).not.toBeNull();
    expect(emptyState?.className).toContain('dark:bg-slate-950/60');
  });
});