import React from 'react';
import { SText } from '../../common/s-components/typography/s-text';
import { SBox } from '../../common/s-components/layout/s-box';
import { Placeholder } from '../../common/components/placeholder';

type TProps = {};

export const NoCharts: React.FC<TProps> = () => {
  return (
    <>
      <SBox
        centerContent
        height={160}
        alignItems="center"
        bg="fiord"
        borderRadius={8}
      >
        <SBox mt={33}>
          <Placeholder
            variant="no-any-charts"
            baseWidth={104}
            baseHeight={185}
            marginBottom={0}
          />
        </SBox>
        <SBox mt={14}>
          <SText>No charts feature this track.</SText>
        </SBox>
      </SBox>
    </>
  );
};