import { SectionOverlay } from 'tradein-mvp-frontend';

// Glass/blur оверлей секций HUD «МЕРА Оценка» (/trade-in/v2): скобки-уголки,
// шапка «номер секции + заголовок + ← К ОЦЕНКЕ», скроллируемое тело со
// сменной view. Позиционируется absolute относительно артборда — в preview
// рендерим contained внутри relative-обёртки с фоном v2-страницы.
// Данные не передаём: каждая view падает на свой встроенный fixture-набор
// (HISTORY_FIXTURE / ANALYTICS_FIXTURE …) — как storybook/unwired usage.

const Artboard = ({ children }: { children?: unknown }) => (
  <div
    style={{
      position: 'relative',
      height: 680,
      borderRadius: 10,
      overflow: 'hidden',
      background:
        'radial-gradient(1100px 520px at 30% -10%, #f7fbff 0%, #eef4fa 55%, #e6eef7 100%)',
    }}
  >
    {children as React.ReactNode}
  </div>
);

/** Секция 04 «ПРОДАЖИ В ДОМЕ» (active=1 → HistoryView на fixture-данных):
 *  таблица ДКП-продаж дома с ценами и датами. */
export const HistorySection = () => (
  <Artboard>
    <SectionOverlay active={1} onClose={() => {}} onNavigate={() => {}} />
  </Artboard>
);

/** Секция 06 «АНАЛИТИКА ДОМА» (active=3 → AnalyticsView): KPI дома,
 *  динамика цены, недавние продажи. */
export const AnalyticsSection = () => (
  <Artboard>
    <SectionOverlay active={3} onClose={() => {}} onNavigate={() => {}} />
  </Artboard>
);