import React from 'react';
import { TVisibility, TKpiData } from '../types';
import { Skeleton } from './skeleton';
import { MarketKpiSlider } from './market-kpi-slider';
import { SBox } from '../../common/s-components/layout/s-box';
// import { TVendor } from '../../common/types';

export type TProps = {
  // route: {
  //   params: {
  //     vendor: TVendor;
  //     cvendor: TVendor;
  //   };
  // };
  visibility: TVisibility;
  data: TKpiData[];
};

export const MarketKpi: React.FC<TProps> = props => {
  const { visibility, data } = props;

  return (
    <SBox mb={44}>
      {visibility.skeleton ? <Skeleton /> : null}

      {(!visibility.skeleton && visibility.data) || visibility.error ? (
        <>
          <MarketKpiSlider data={data} />
        </>
      ) : null}
    </SBox>
  );
};