/* @vitest-environment jsdom */

import { render, screen } from '@testing-library/react';
import { expect, test } from 'vitest';

import { PlatformOverlayBadge } from './PlatformOverlayBadge';

test('renders a light top-left overlay badge by default', () => {
  render(<PlatformOverlayBadge>第1幕</PlatformOverlayBadge>);

  const badge = screen.getByText('第1幕');

  expect(badge.className).toContain('absolute');
  expect(badge.className).toContain('left-3');
  expect(badge.className).toContain('top-3');
  expect(badge.className).toContain('bg-white/88');
  expect(badge.className).toContain('tracking-[0.18em]');
});

test('supports alternate placement and custom class', () => {
  render(
    <PlatformOverlayBadge placement="bottomRight" className="custom-overlay">
      已选择
    </PlatformOverlayBadge>,
  );

  const badge = screen.getByText('已选择');

  expect(badge.className).toContain('bottom-3');
  expect(badge.className).toContain('right-3');
  expect(badge.className).toContain('custom-overlay');
});

test('supports compact muted tight overlay badge', () => {
  render(
    <PlatformOverlayBadge
      placement="topRight"
      offset="tight"
      tone="muted"
      size="compact"
    >
      占位图
    </PlatformOverlayBadge>,
  );

  const badge = screen.getByText('占位图');

  expect(badge.className).toContain('right-2');
  expect(badge.className).toContain('top-2');
  expect(badge.className).toContain('bg-[var(--platform-subpanel-fill)]');
  expect(badge.className).toContain('px-2');
  expect(badge.className).toContain('tracking-normal');
});