import { fireEvent, render, screen } from '@testing-library/react';
import { useState } from 'react';
import { describe, expect, test } from 'vitest';
import { SegmentedTabs } from './SegmentedTabs';

function Example() {
  const [value, setValue] = useState<'one' | 'two' | 'three'>('one');
  return <SegmentedTabs
    ariaLabel="示例页签"
    value={value}
    onChange={setValue}
    items={[
      { key: 'one', label: '第一个', count: 3 },
      { key: 'two', label: '第二个' },
      { key: 'three', label: '第三个' }
    ]}
  />;
}

describe('SegmentedTabs', () => {
  test('uses Semi buttons with tab semantics and keyboard navigation', () => {
    render(<Example />);
    const first = screen.getByRole('tab', { name: /第一个\s+3/, selected: true });
    expect(first).toHaveClass('semi-button');
    expect(first).toHaveAttribute('tabindex', '0');

    fireEvent.keyDown(first, { key: 'ArrowRight' });
    expect(screen.getByRole('tab', { name: '第二个', selected: true })).toHaveAttribute('tabindex', '0');

    fireEvent.keyDown(screen.getByRole('tab', { name: '第二个' }), { key: 'End' });
    expect(screen.getByRole('tab', { name: '第三个', selected: true })).toBeInTheDocument();
  });
});
