import React from 'react';
import { useUIKit } from '@tencentcloud/uikit-base-component-react';
import styles from './Empty.module.scss';

export function EmptyResult(props: { text?: string }) {
  const { t } = useUIKit();
  const { text = t('Search.No Content') } = props;
  return (
    <div className={styles.SearchEmpty}>
      <svg className={styles.SearchEmpty__icon} width="88" height="75" viewBox="0 0 88 75" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path fillRule="evenodd" clipRule="evenodd" d="M19.0324 36.6614L35.4424 35.001L50.4526 36.6614C50.4526 36.6614 61.6001 37.9124 65.8807 45.5045C68.7348 50.5664 73.4912 61.1246 76.3444 67.5996C77.481 70.1789 75.5849 73.0524 72.7663 73.0524H4.77873C2.30474 73.0524 0.447615 70.7916 0.9281 68.3647L4.43639 50.6447C4.43639 50.6447 5.43423 45.2709 8.58023 41.2975C11.7262 37.3241 19.0324 36.6614 19.0324 36.6614Z" fill="url(#paint0_linear_45_28871)" />
        <path fillRule="evenodd" clipRule="evenodd" d="M29.4653 35.914V25.3516H41.7997V35.914C41.7997 38.7814 39.0391 41.1059 35.6325 41.1059C32.2259 41.1059 29.4653 38.7814 29.4653 35.914Z" fill="#FEDFC7" />
        <mask id="mask0_45_28871" style={{ maskType: 'luminance' }} maskUnits="userSpaceOnUse" x="29" y="23" width="13" height="17">
          <path fillRule="evenodd" clipRule="evenodd" d="M29.4653 33.8515V23.2891H41.7997V33.8515C41.7997 36.7189 39.0391 39.0434 35.6325 39.0434C32.2259 39.0434 29.4653 36.7189 29.4653 33.8515Z" fill="white" />
        </mask>
        <g mask="url(#mask0_45_28871)">
          <ellipse cx="36.872" cy="28.4332" rx="7.40667" ry="5.82872" fill="#FAB691" />
        </g>
        <ellipse cx="2.55302" cy="2.69371" rx="2.55302" ry="2.69371" transform="matrix(-1 0 0 1 48.8062 17.5176)" fill="url(#paint1_linear_45_28871)" />
        <ellipse cx="2.55302" cy="2.69371" rx="2.55302" ry="2.69371" transform="matrix(-1 0 0 1 48.8062 17.5176)" fill="url(#paint2_linear_45_28871)" />
        <ellipse cx="2.32093" cy="2.69371" rx="2.32093" ry="2.69371" transform="matrix(-1 0 0 1 29.3105 17.5176)" fill="url(#paint3_linear_45_28871)" />
        <ellipse cx="2.32093" cy="2.69371" rx="2.32093" ry="2.69371" transform="matrix(-1 0 0 1 29.3105 17.5176)" fill="url(#paint4_linear_45_28871)" />
        <path d="M42.0288 5.47949H31.4457C29.2409 5.47949 27.4536 7.20216 27.4536 9.32719V23.8464C27.4536 28.7882 31.61 32.7944 36.7373 32.7944C41.8645 32.7944 46.021 28.7882 46.021 23.8464V9.32654C46.0206 7.2017 44.2333 5.4794 42.0288 5.47949Z" fill="#FEDFC7" />
        <path d="M47.8779 19.3691C47.8779 19.3691 46.9071 19.4131 46.5907 20.8378" stroke="#FDB99E" strokeWidth="0.326414" strokeLinecap="round" />
        <path d="M25.7021 19.3691C25.7021 19.3691 26.673 19.4131 26.9894 20.8378" stroke="#FDB99E" strokeWidth="0.326414" strokeLinecap="round" />
        <path d="M49.3371 10.9928C49.6797 8.25295 48.4019 6.54056 47.1457 6.88305C46.3234 2.49922 43.6053 1.17497 42.349 1.06082C42.349 1.17496 42.486 1.67724 43.0342 2.77319C42.0064 1.74573 36.5244 -0.994149 31.0425 0.375792C25.5606 1.74573 24.5328 4.8281 25.5606 7.56798C23.1623 7.56798 26.2459 17.8425 27.2737 20.5824C27.959 19.8975 27.4094 13.6994 27.752 11.6445C33.5766 14.0419 43.1699 13.0144 45.5683 11.987C45.5683 13.3569 45.3399 18.2659 45.9109 20.8916C46.4819 18.9509 48.8835 14.6201 49.3371 10.9928Z" fill="#D9D9D9" />
        <path d="M49.3371 10.9928C49.6797 8.25295 48.4019 6.54056 47.1457 6.88305C46.3234 2.49922 43.6053 1.17497 42.349 1.06082C42.349 1.17496 42.486 1.67724 43.0342 2.77319C42.0064 1.74573 36.5244 -0.994149 31.0425 0.375792C25.5606 1.74573 24.5328 4.8281 25.5606 7.56798C23.1623 7.56798 26.2459 17.8425 27.2737 20.5824C27.959 19.8975 27.4094 13.6994 27.752 11.6445C33.5766 14.0419 43.1699 13.0144 45.5683 11.987C45.5683 13.3569 45.3399 18.2659 45.9109 20.8916C46.4819 18.9509 48.8835 14.6201 49.3371 10.9928Z" fill="url(#paint5_linear_45_28871)" />
        <path d="M50.9863 23.5074C51.3359 28.4883 47.5797 32.808 42.596 33.1552C37.6124 33.5024 33.2893 29.7455 32.9398 24.7647C32.5902 19.7838 36.3463 15.4641 41.33 15.1169C46.3137 14.7697 50.6367 18.5265 50.9863 23.5074Z" fill="#F8F8F8" stroke="#91BFFF" strokeWidth="1.47201" />
        <path fillRule="evenodd" clipRule="evenodd" d="M48.4159 29.3082L60.2204 38.4678C61.3743 39.3631 61.5388 41.0436 60.5804 42.1456C59.6221 43.2477 57.9344 43.3187 56.8868 42.3011L46.17 31.8909L48.4159 29.3082Z" fill="#90BFFF" />
        <path fillRule="evenodd" clipRule="evenodd" d="M78.9294 72.6402C75.5061 73.9444 71.6512 72.4448 70.0091 69.1701L56.2829 41.7965L55.8306 42.2766C55.1442 43.0053 53.9301 42.7503 53.595 41.8069L53.2894 41.8711C52.2473 42.09 51.2677 41.2948 51.2677 40.2299L50.6717 40.385C49.6989 40.6381 48.7615 39.8706 48.8176 38.867C47.3893 38.867 46.4365 37.3935 47.0227 36.0911L48.3902 33.0522C48.5427 32.7133 48.7492 32.4014 49.0017 32.1287L50.3749 30.6449C51.2107 29.7419 52.3854 29.2285 53.6158 29.2285H56.517C57.3617 29.2285 58.147 29.6631 58.5957 30.3788L63.047 37.4796L81.9968 61.5573C84.9743 65.3406 83.4284 70.9262 78.9294 72.6402Z" fill="#FEDFC7" />
        <path d="M52.1275 33.0801L51.0465 34.0849C49.682 35.3531 48.8456 37.089 48.7041 38.9465V38.9465" stroke="#F6B997" strokeWidth="0.490671" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M54.0838 35.5244L53.8406 35.6962C52.289 36.7921 51.3033 38.5197 51.1494 40.4131V40.4131" stroke="#F6B997" strokeWidth="0.490671" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M56.0402 37.4795L55.7883 37.6882C54.5438 38.719 53.7558 40.1989 53.5952 41.8069V41.8069" stroke="#F6B997" strokeWidth="0.490671" strokeLinecap="round" strokeLinejoin="round" />
        <path fillRule="evenodd" clipRule="evenodd" d="M58.9714 38.5423L59.3752 38.8928C60.4659 39.8399 60.4216 41.5464 59.2832 42.4355L59.0721 42.6003C58.0983 43.3608 56.6783 43.0987 56.0403 42.0407L56.1421 41.7726C56.4197 41.0412 56.8227 40.3637 57.333 39.7706C57.7401 39.2975 58.2372 38.91 58.7954 38.6305L58.9714 38.5423Z" fill="#91BFFF" />
        <defs>
          <linearGradient id="paint0_linear_45_28871" x1="39.3606" y1="35.001" x2="39.3606" y2="73.0524" gradientUnits="userSpaceOnUse">
            <stop stopColor="#B9D8FF" />
            <stop offset="1" stopColor="#B9D8FF" stopOpacity="0.31" />
          </linearGradient>
          <linearGradient id="paint1_linear_45_28871" x1="0" y1="5.38742" x2="5.10603" y2="5.38742" gradientUnits="userSpaceOnUse">
            <stop stopColor="#FEDFC7" />
            <stop offset="0.4456" stopColor="#FEC5A6" />
          </linearGradient>
          <linearGradient id="paint2_linear_45_28871" x1="5.91369" y1="-1.22972" x2="-1.55757" y2="-2.76772" gradientUnits="userSpaceOnUse">
            <stop stopColor="#FEDFC7" />
            <stop offset="1" stopColor="#FEC5A6" />
          </linearGradient>
          <linearGradient id="paint3_linear_45_28871" x1="0" y1="5.38742" x2="4.64185" y2="5.38742" gradientUnits="userSpaceOnUse">
            <stop stopColor="#FEDFC7" />
            <stop offset="0.4456" stopColor="#FEC5A6" />
          </linearGradient>
          <linearGradient id="paint4_linear_45_28871" x1="5.37609" y1="-1.22972" x2="-1.46424" y2="-2.50983" gradientUnits="userSpaceOnUse">
            <stop stopColor="#FEDFC7" />
            <stop offset="1" stopColor="#FEC5A6" />
          </linearGradient>
          <linearGradient id="paint5_linear_45_28871" x1="28.4806" y1="1.87559" x2="28.4806" y2="16.2776" gradientUnits="userSpaceOnUse">
            <stop stopColor="#757575" />
            <stop offset="1" stopColor="#626262" />
          </linearGradient>
        </defs>
      </svg>
      <div className={styles.SearchEmpty__text}>
        <p className={styles.SearchEmpty__title}>{text}</p>
      </div>
    </div>
  );
}

export default EmptyResult;