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 { MissionActionCard } from '../HomePage';

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

vi.mock('../../lib/emotionTheme', () => ({
  getEmotionTheme: () => ({
    gradientBackground: 'linear-gradient(135deg, #FF5A5F, #FFF8F5)',
  }),
  getEmotionIcon: () => '🙂',
}));

vi.mock('swiper/react', () => ({
  Swiper: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
  SwiperSlide: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
}));

vi.mock('swiper/modules', () => ({
  EffectCards: {},
}));

describe('MissionActionCard layout spacing', () => {
  it('uses a tighter min height for the stack container', () => {
    render(
      <MemoryRouter>
        <MissionActionCard
          token="demo"
          mission={{
            id: 1,
            title: 'Demo Mission',
            description: 'Do a demo task.',
            duration: 3,
            emotion: null,
          }}
          loading={false}
          onAdvance={() => {}}
          stack={[]}
          initialIndex={0}
          onIndexChange={() => {}}
          swiperRef={{ current: null }}
        />
      </MemoryRouter>,
    );

    const stack = screen.getByTestId('mission-card-stack');
    expect(stack.className).toContain('min-h-[240px]');
    expect(stack.className).toContain('sm:min-h-[260px]');
  });
});