// Regression fixture: reuse each badge while changing from long to short numbers.
import { useState } from 'react';
import { createRoot } from 'react-dom/client';
import type { CSSProperties } from 'react';
import '@fontsource-variable/manrope';
import '../src/styles.css';
import { RouteBadge } from '../src/RouteBadge';
function Preview() {
  const [short, setShort] = useState(false);
  const numbers = short ? ['2', '6', '11'] : ['21тк', '16тк', '11'];
  return <div className="board" data-theme="dark" style={{ '--accent': '#d5ff70' } as CSSProperties}>
    <header className="board-header"><h1>Смена номеров</h1><button className="primary-button" onClick={() => setShort(value => !value)}>{short ? 'Длинные номера' : 'Короткие номера'}</button></header>
    <main className="scene-container"><section className="info-screen"><section className="info-card routes-info" data-active="true" style={{ maxWidth: 540, height: '100%' }}><h3>Маршруты остановки</h3>
      <div className="route-cloud" data-carousel="false" style={{ '--route-rows': 3 } as CSSProperties}><div className="route-list">{numbers.map((number, index) => <article className="route-tile" key={index}><RouteBadge number={number} filled /><div className="route-card-name"><h3 className="destination-heading">{['Калинина — Автовокзал', 'Гвардеец — Автовокзал', 'Тросницкая — Автовокзал'][index]}</h3><div className="route-card-next"><time>06:19</time><span className="route-kind">Автобус</span></div></div></article>)}</div></div>
    </section></section></main>
  </div>;
}
createRoot(document.getElementById('root')!).render(<Preview />);