import { PriceRangeBar } from 'tradein-mvp-frontend';
import { FIXTURE_ESTIMATE } from './_fixtures';

const wrap = (node: React.ReactNode) => (
  <div style={{ maxWidth: 460, padding: 12 }}>{node}</div>
);

/** Типовой коридор asking-цены с медианой по центру. */
export const Default = () =>
  wrap(
    <PriceRangeBar
      rangeLow={FIXTURE_ESTIMATE.range_low_rub}
      rangeHigh={FIXTURE_ESTIMATE.range_high_rub}
      median={FIXTURE_ESTIMATE.median_price_rub}
    />,
  );

/** Широкий разброс — медиана смещена влево. */
export const WideSpread = () =>
  wrap(<PriceRangeBar rangeLow={7_400_000} rangeHigh={12_900_000} median={9_100_000} />);

/** Узкий коридор — высокая достоверность. */
export const Tight = () =>
  wrap(<PriceRangeBar rangeLow={9_600_000} rangeHigh={10_100_000} median={9_850_000} />);