/* @vitest-environment jsdom */

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

import { PlatformFieldLabel } from './PlatformFieldLabel';

test('renders compact field label by default', () => {
  render(<PlatformFieldLabel>作品名称</PlatformFieldLabel>);

  const label = screen.getByText('作品名称');

  expect(label.className).toContain('text-xs');
  expect(label.className).toContain('text-[var(--platform-text-soft)]');
});

test('renders section label with tracking', () => {
  render(<PlatformFieldLabel variant="section">作品信息</PlatformFieldLabel>);

  const label = screen.getByText('作品信息');

  expect(label.className).toContain('tracking-[0.18em]');
  expect(label.className).toContain('font-bold');
});

test('renders form label and keeps local classes', () => {
  render(
    <PlatformFieldLabel variant="form" className="mt-1">
      一句话创作
    </PlatformFieldLabel>,
  );

  const label = screen.getByText('一句话创作');

  expect(label.className).toContain('mb-2');
  expect(label.className).toContain('font-black');
  expect(label.className).toContain('mt-1');
});

test('renders inline form label without block spacing', () => {
  render(
    <PlatformFieldLabel variant="inlineForm" className="shrink-0">
      关卡数
    </PlatformFieldLabel>,
  );

  const label = screen.getByText('关卡数');

  expect(label.className).toContain('inline-flex');
  expect(label.className).toContain('text-sm');
  expect(label.className).toContain('font-bold');
  expect(label.className).toContain('shrink-0');
  expect(label.className).not.toContain('mb-2');
});

test('renders pill and accent pill labels', () => {
  render(
    <>
      <PlatformFieldLabel variant="pill">作品标题</PlatformFieldLabel>
      <PlatformFieldLabel variant="accentPill">
        主题/场景描述
      </PlatformFieldLabel>
    </>,
  );

  expect(screen.getByText('作品标题').className).toContain('rounded-full');
  expect(screen.getByText('主题/场景描述').className).toContain('bg-rose-50');
});