interface IconProps {
  size?: number | string;
}

export const WebsiteIcon = ({ size = 24 }: IconProps) => (
  <svg width={size} height={size} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
    <circle cx="12" cy="12" r="10" fill="#1A73E8" />
    <path
      d="M12 2C9.7 2 7.5 3.1 5.9 4.9 7 5.6 8.5 6 10 6c2.3 0 4.4-.7 6-1.9C14.8 2.6 13.4 2 12 2zM4.1 7.5C3.4 8.9 3 10.4 3 12s.4 3.1 1.1 4.5C4.9 15.5 6.3 15 8 15c2.3 0 4.4.7 6 1.9-1.2 1.5-3.1 2.5-5 2.5-2.3 0-4.4-.7-6-1.9 1.3 2.7 4.1 4.5 7.3 4.5 4.4 0 8-3.6 8-8s-3.6-8-8-8c-2.9 0-5.5 1.6-6.9 3.5z"
      fill="#fff"
    />
  </svg>
);

export const ApparelIcon = () => (
  <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path
      fillRule="evenodd"
      clipRule="evenodd"
      d="M16.1593 29.6192H16.1405C13.3286 29.6192 10.4229 29.1131 7.49848 28.1195C7.31102 28.0633 7.19854 27.8946 7.19854 27.7071V19.3087L4.63029 28.9069C4.5928 29.0193 4.51782 29.1131 4.42409 29.1693C4.3491 29.2068 4.27411 29.2255 4.19913 29.2255C4.16164 29.2255 4.12414 29.2255 4.08665 29.2255L0.337384 28.2132C0.112428 28.157 -0.0375431 27.932 0.0186959 27.6883L3.71172 10.5917C3.74922 10.4042 3.78671 10.2168 3.8242 10.0293C4.38659 7.32982 5.02397 4.27417 9.11067 4.27417H11.6414C11.8289 4.27417 11.9789 4.38664 12.0351 4.53661H20.1335C20.1898 4.38664 20.3585 4.27417 20.5272 4.27417H22.9455C27.0134 4.27417 27.6508 7.32982 28.2132 10.0293L28.2882 10.3292L31.9812 27.7633C32.0187 27.9883 31.8875 28.2132 31.6625 28.2695L27.8945 29.2818C27.857 29.2818 27.8195 29.3005 27.782 29.3005C27.7445 29.3005 27.707 29.2818 27.6695 29.2818C27.6133 29.263 27.5383 29.2255 27.5008 29.188C27.4821 29.1693 27.4821 29.1693 27.4821 29.1693L27.4633 29.1506C27.4446 29.1318 27.4258 29.0943 27.4071 29.0568C27.3883 29.0381 27.3696 29.0006 27.3696 28.9631L24.8014 19.3837V27.7071C24.8014 27.8946 24.6889 28.0633 24.5014 28.1195C21.8019 29.1131 18.99 29.6192 16.1593 29.6192Z"
      fill="#38598C"
    />
    <path
      fillRule="evenodd"
      clipRule="evenodd"
      d="M19.515 6.16755C19.44 6.16755 19.365 6.1488 19.29 6.11131C17.2841 4.94903 15.1658 4.94903 12.86 6.11131C12.635 6.22378 12.3726 6.1488 12.2789 5.92384C12.2414 5.88635 12.2414 5.84886 12.2226 5.79262C11.9039 5.64265 11.2103 4.93029 11.2103 4.70533V3.74927C11.2103 3.58055 11.3228 3.41183 11.4728 3.35559C14.6222 2.04335 17.7341 2.04335 20.696 3.35559C20.8647 3.43058 20.9584 3.58055 20.9584 3.74927V4.70533C20.9584 4.89279 20.3398 5.53017 19.9461 5.79262C19.9274 5.84886 19.9086 5.9051 19.8899 5.94259C19.8149 6.09256 19.6649 6.16755 19.515 6.16755Z"
      fill="#2C4467"
    />
  </svg>
);

export const HomeIcon = () => (
  <svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path
      d="M21.6553 12.4506V21.7327H3.34473V12.1635L12.3566 3.14624L21.6553 12.4506Z"
      fill="#D1DDEB"
    />
    <path
      d="M23.8572 13.3241C23.7325 13.4506 23.5839 13.5509 23.4199 13.6191C23.256 13.6873 23.08 13.722 22.9025 13.7212C22.5604 13.7212 22.2126 13.5889 21.9478 13.3241L20.6233 11.9994L12.3677 3.73816L6.78292 9.32838L6.23649 9.88045L4.37126 11.7457L3.05228 13.059C2.52258 13.5835 1.66713 13.5835 1.14288 13.059C0.613181 12.5348 0.613181 11.6739 1.14288 11.1496L3.57108 8.72143L6.78292 5.50413L11.4128 0.874248C11.538 0.748466 11.6868 0.648622 11.8507 0.580435C12.0145 0.512248 12.1902 0.477057 12.3677 0.476879C12.7318 0.476879 13.0739 0.6203 13.3222 0.874248L23.8572 11.4145C24.3869 11.9389 24.3869 12.7942 23.8572 13.3241Z"
      fill="#53AFF4"
    />
  </svg>
);

export const BeautyIcon = () => (
  <svg width="23" height="23" viewBox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M9.24228 0.990353H7.54028V4.97104H9.24228V0.990353Z" fill="#E2E2E4" />
    <path
      d="M13.9752 11.3091L12.619 21.2219C12.536 21.84 12.0101 22.2967 11.3873 22.2967H5.30306C4.68029 22.2967 4.15448 21.84 4.07148 21.2219L2.71534 11.3091C2.30936 8.3385 4.61576 5.69064 7.6187 5.69064H9.07169C12.0747 5.69064 14.3811 8.3385 13.9752 11.3091Z"
      fill="#5694FD"
    />
    <path
      d="M20.3312 16.2831V20.5578C20.3312 21.5322 19.5399 22.3235 18.5655 22.3235H12.2755C11.301 22.3235 10.5125 21.5322 10.5125 20.5578V16.2831C10.5125 15.8449 10.8683 15.4892 11.3063 15.4892H19.5346C19.9754 15.4892 20.3312 15.8449 20.3312 16.2831Z"
      fill="#FC3650"
    />
  </svg>
);

export const FoodIcon = () => (
  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path
      d="M23.625 4.5C23.625 6.465 22.6875 8.10375 21.435 8.52L21.75 22.6875V22.7063C21.7475 22.9494 21.6485 23.1816 21.4748 23.3518C21.3011 23.522 21.0669 23.6162 20.8237 23.6138C20.5806 23.6113 20.3483 23.5123 20.1781 23.3386C20.008 23.1649 19.9137 22.9307 19.9162 22.6875L20.0325 17.5388V17.5275L20.2312 8.535C18.9562 8.14125 18 6.48375 18 4.5C17.9987 4.44115 18.0012 4.38228 18.0075 4.32375C18.0675 2.12625 19.3012 0.375 20.8125 0.375C22.365 0.375 23.625 2.22 23.625 4.5Z"
      fill="#FBB03B"
    />
    <path
      d="M17.7863 8.98875C17.9802 9.63385 18.0407 10.3117 17.9639 10.981C17.8872 11.6502 17.6749 12.2968 17.34 12.8813C16.4288 14.6775 15.2513 15.9375 12.8063 17.6325C12.705 17.7038 12.5962 17.775 12.4875 17.85C12.3435 17.9471 12.1737 17.999 12 17.999C11.8263 17.999 11.6565 17.9471 11.5125 17.85C11.4038 17.775 11.295 17.7038 11.1938 17.6325C11.0025 17.5013 10.8187 17.37 10.6425 17.2425C8.565 15.7388 7.5 14.5388 6.66 12.8813C6.2457 12.1221 6.01938 11.2747 6 10.41C6.0026 9.92844 6.07459 9.44977 6.21375 8.98875C6.29947 8.68871 6.43649 8.40578 6.61875 8.1525C6.79679 7.90009 7.01611 7.67949 7.2675 7.5C7.78956 7.12454 8.41695 6.92372 9.06 6.92625C9.59966 6.92057 10.1307 7.06167 10.5964 7.33447C11.062 7.60726 11.4448 8.00149 11.7037 8.475L12 9.24375L12.2963 8.475C12.547 8.00392 12.9252 7.6128 13.3875 7.34625C13.8536 7.07438 14.3829 6.92957 14.9225 6.92628C15.4621 6.92299 15.9931 7.06134 16.4625 7.3275C16.556 7.37925 16.6462 7.43686 16.7325 7.5C16.9839 7.67949 17.2032 7.90009 17.3812 8.1525C17.5635 8.40578 17.7005 8.68871 17.7863 8.98875Z"
      fill="#D83939"
    />
  </svg>
);

export const HealthIcon = () => (
  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path
      d="M9.99999 12.1875C18.8125 5.75906 15.2075 2.14281 15.2075 2.14281C14.9281 1.76894 14.5654 1.46535 14.1482 1.25612C13.731 1.0469 13.2708 0.937803 12.804 0.9375C11.2019 0.9375 9.99999 2.14281 9.99999 2.14281C9.99999 2.14281 8.79811 0.9375 7.19592 0.9375C6.7292 0.937803 6.26897 1.0469 5.85176 1.25612C5.43456 1.46535 5.07187 1.76894 4.79249 2.14281C4.79249 2.14281 1.18749 5.75906 9.99999 12.1875Z"
      fill="#C2185B"
    />
    <path
      d="M18.9591 12.2419C18.8018 12.0009 18.5611 11.8266 18.283 11.7525C18.005 11.6784 17.7095 11.7096 17.4531 11.8403L15.1894 12.9966C15.176 12.9555 15.1583 12.916 15.1366 12.8787C14.9548 12.5641 14.6591 12.3314 14.3106 12.2287C13.962 12.1261 13.5873 12.1613 13.2641 12.3272L10.7419 13.6216C10.5654 13.7122 10.3697 13.7589 10.1713 13.7576C9.97288 13.7563 9.77775 13.7071 9.6025 13.6141L7.88375 12.7012C7.28281 12.3821 6.60537 12.2353 5.92624 12.277C5.2471 12.3187 4.59271 12.5473 4.03531 12.9375L3.40625 13.3791L4.32656 17.6916L5.71656 17.3922C5.99061 17.3333 6.27277 17.3221 6.55063 17.3591L10.4541 17.7872C11.1883 17.8851 11.933 17.711 12.5478 17.2978L18.7894 13.1103C18.9259 13.0167 19.0202 12.8733 19.052 12.7108C19.0837 12.5484 19.0503 12.3799 18.9591 12.2419Z"
      fill="#FADCB4"
    />
  </svg>
);

export const SportsIcon = () => (
  <svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path
      d="M13 23.2917C18.6839 23.2917 23.2916 18.6839 23.2916 13C23.2916 7.31607 18.6839 2.70833 13 2.70833C7.31605 2.70833 2.70831 7.31607 2.70831 13C2.70831 18.6839 7.31605 23.2917 13 23.2917Z"
      fill="#FF5722"
    />
    <path
      d="M2.7354 12.4583C2.72619 12.6387 2.70831 12.8169 2.70831 13C2.70831 13.1831 2.72619 13.3613 2.7354 13.5417H23.2646C23.2738 13.3613 23.2916 13.1831 23.2916 13C23.2916 12.8169 23.2738 12.6387 23.2646 12.4583H2.7354Z"
      fill="#BF360C"
    />
  </svg>
);

export const ToysIcon = () => (
  <svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path
      d="M11.1719 18.2812C15.9957 18.2812 19.9062 14.3707 19.9062 9.54688C19.9062 4.72301 15.9957 0.8125 11.1719 0.8125C6.34801 0.8125 2.4375 4.72301 2.4375 9.54688C2.4375 14.3707 6.34801 18.2812 11.1719 18.2812Z"
      fill="#F9D7F7"
    />
    <path
      d="M19.3565 22.3438H13.1434C12.8328 22.3435 12.5263 22.2737 12.2462 22.1395C11.9661 22.0053 11.7197 21.8102 11.5249 21.5683C11.3301 21.3264 11.1919 21.044 11.1205 20.7418C11.049 20.4396 11.0462 20.1252 11.1121 19.8217L12.239 13.8255C12.34 13.3617 12.5965 12.9464 12.9659 12.6484C13.3354 12.3505 13.7957 12.1879 14.2703 12.1875H18.2304C18.7051 12.1879 19.1653 12.3505 19.5348 12.6484C19.9042 12.9464 20.1607 13.3617 20.2617 13.8255L21.3886 19.8217C21.4545 20.1253 21.4517 20.4397 21.3802 20.742C21.3087 21.0443 21.1705 21.3267 20.9756 21.5686C20.7807 21.8105 20.5341 22.0057 20.254 22.1398C19.9738 22.2739 19.6672 22.3436 19.3565 22.3438Z"
      fill="#BF7E68"
    />
  </svg>
);

export const PetsIcon = () => (
  <svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path
      d="M11.1719 18.2812C15.9957 18.2812 19.9062 14.3707 19.9062 9.54688C19.9062 4.72301 15.9957 0.8125 11.1719 0.8125C6.34801 0.8125 2.4375 4.72301 2.4375 9.54688C2.4375 14.3707 6.34801 18.2812 11.1719 18.2812Z"
      fill="#F9D7F7"
    />
    <path
      d="M19.3565 22.3438H13.1434C12.8328 22.3435 12.5263 22.2737 12.2462 22.1395C11.9661 22.0053 11.7197 21.8102 11.5249 21.5683C11.3301 21.3264 11.1919 21.044 11.1205 20.7418C11.049 20.4396 11.0462 20.1252 11.1121 19.8217L12.239 13.8255C12.34 13.3617 12.5965 12.9464 12.9659 12.6484C13.3354 12.3505 13.7957 12.1879 14.2703 12.1875H18.2304C18.7051 12.1879 19.1653 12.3505 19.5348 12.6484C19.9042 12.9464 20.1607 13.3617 20.2617 13.8255L21.3886 19.8217C21.4545 20.1253 21.4517 20.4397 21.3802 20.742C21.3087 21.0443 21.1705 21.3267 20.9756 21.5686C20.7807 21.8105 20.5341 22.0057 20.254 22.1398C19.9738 22.2739 19.6672 22.3436 19.3565 22.3438Z"
      fill="#BF7E68"
    />
    <path
      d="M20.6213 11.375H11.9628C11.7055 11.3823 11.4499 11.3299 11.2161 11.222C10.9824 11.114 10.7768 10.9534 10.6155 10.7527C10.4541 10.5521 10.3414 10.3168 10.2862 10.0653C10.231 9.81378 10.2348 9.55292 10.2972 9.30312L11.5083 4.888C11.613 4.52889 11.8326 4.21401 12.1333 3.99155C12.4341 3.76909 12.7994 3.65131 13.1735 3.65625H19.4102C19.7843 3.65127 20.1496 3.76897 20.4505 3.99135C20.7513 4.21372 20.9709 4.52853 21.0758 4.88759L22.2861 9.30312C22.3485 9.55285 22.3523 9.81364 22.2971 10.0651C22.2419 10.3165 22.1293 10.5518 21.9681 10.7524C21.8068 10.9531 21.6014 11.1137 21.3677 11.2217C21.134 11.3297 20.8786 11.3822 20.6213 11.375Z"
      fill="#BF7E68"
    />
  </svg>
);

export const CheckIcon = ({styles}: any) => (
  <svg
    className={styles.featureIcon}
    width="15"
    height="15"
    viewBox="0 0 15 15"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M5.62513 11.25C5.54305 11.2501 5.46175 11.234 5.38592 11.2025C5.31009 11.1711 5.24121 11.125 5.18326 11.0669L2.68326 8.56687C2.56941 8.449 2.50641 8.29112 2.50784 8.12725C2.50926 7.96337 2.57499 7.80662 2.69087 7.69074C2.80675 7.57486 2.96351 7.50913 3.12738 7.5077C3.29125 7.50628 3.44913 7.56927 3.56701 7.68312L5.62513 9.74119L11.4333 3.93312C11.4909 3.87343 11.5599 3.82581 11.6361 3.79306C11.7124 3.7603 11.7944 3.74306 11.8774 3.74234C11.9604 3.74162 12.0427 3.75743 12.1195 3.78886C12.1963 3.82028 12.2661 3.86669 12.3248 3.92538C12.3834 3.98406 12.4298 4.05384 12.4613 4.13065C12.4927 4.20746 12.5085 4.28976 12.5078 4.37275C12.5071 4.45574 12.4898 4.53775 12.4571 4.614C12.4243 4.69025 12.3767 4.75922 12.317 4.81687L6.06701 11.0669C6.00905 11.125 5.94018 11.1711 5.86435 11.2025C5.78851 11.234 5.70722 11.2501 5.62513 11.25Z"
      fill="#41A461"
    />
  </svg>
);
