import type { BoxProps } from '@chakra-ui/react';
import { Center, chakra, VStack } from '@chakra-ui/react';
import React from 'react';

interface Props extends BoxProps {
  term?: string;
}

const FallbackChart = ({ term, ...props }: Props) => {
  return (
    <Center { ...props } w="100%">
      <VStack rowGap={ 3 }>
        <chakra.span textStyle="xs" color="text.secondary">{ term } stats unavailable</chakra.span>
        <chakra.div width="100px" height="41px">
          <chakra.svg viewBox="0 0 100 41" fill="none" xmlns="http://www.w3.org/2000/svg">
            <chakra.path
              // eslint-disable-next-line max-len
              d="M98.745 17.7758C98.0073 17.4443 97.1401 17.7738 96.8087 18.5121L95.7348 20.9031C94.9387 22.6752 93.2999 23.1744 92.0327 23.05C90.7649 22.9258 89.2544 22.1184 88.8174 20.2254L87.1413 12.9621C86.4794 10.0939 84.1553 8.09453 81.2206 7.86856C78.2872 7.64375 75.6829 9.26269 74.5897 11.9957L72.5956 16.9809C71.8413 18.8662 70.1571 19.3967 68.8315 19.268C67.5065 19.1373 65.9583 18.2863 65.5868 16.2896L63.5589 5.39024C62.9444 2.08731 60.1796 -0.1293 56.8133 0.00585597C53.4563 0.138668 50.8657 2.56504 50.5139 5.90645L47.5012 34.5273C47.2467 36.9457 45.3815 37.8072 43.8618 37.8102C43.8591 37.8102 43.8569 37.8102 43.8542 37.8102C42.3358 37.8102 40.4731 36.9545 40.21 34.5412L39.3577 26.7275C38.9536 23.024 36.0753 21.1191 33.4022 20.874C30.7274 20.6277 27.5524 21.9791 26.4821 25.5475C25.8749 27.5725 24.1231 28.2203 22.7979 28.1562C21.478 28.0941 19.7897 27.2859 19.3751 25.2129L18.2139 19.4072C16.9044 12.8602 7.82643 12.1783 5.54674 18.4467L0.088542 33.4551C-0.187825 34.2156 0.204362 35.0559 0.964518 35.3324C1.72585 35.609 2.56549 35.2164 2.84186 34.4564L8.29948 19.448C9.00026 17.5211 10.6852 16.9445 12.0225 17.0447C13.363 17.1465 14.9385 17.9713 15.3405 19.9816L16.5016 25.7873C17.1061 28.8098 19.5809 30.9377 22.6596 31.0826C25.7354 31.2228 28.402 29.3414 29.2878 26.3893C29.9237 24.2697 31.7581 23.6656 33.1342 23.7914C34.5114 23.9176 36.2048 24.8455 36.4446 27.0451L37.2969 34.8588C37.738 38.9014 41.0024 40.7398 43.8542 40.7396C43.8583 40.7396 43.8628 40.7396 43.8667 40.7396C46.7214 40.7344 49.988 38.8838 50.4141 34.834L53.4268 6.21308C53.6719 3.88476 55.4661 2.99101 56.9284 2.9332C58.3897 2.87578 60.2499 3.62461 60.678 5.92617L62.7059 16.8256C63.9153 23.3273 72.862 24.2023 75.3153 18.0688L77.3094 13.0836C78.0467 11.2398 79.6942 10.6883 80.9952 10.7896C82.2932 10.8896 83.8397 11.6859 84.2864 13.6209L85.9626 20.8842C86.61 23.6902 88.8803 25.685 91.7465 25.9658C94.6133 26.2463 97.2272 24.7307 98.4071 22.1033L99.4809 19.7123C99.8128 18.9742 99.4833 18.1072 98.745 17.7758Z"
              fill={{ _light: 'gray.300', _dark: 'whiteAlpha.300' }}
            />
          </chakra.svg>
        </chakra.div>
      </VStack>
    </Center>
  );
};

export default React.memo(FallbackChart);