import { ark } from '@ark-ui/react/factory';
import type { ComponentProps } from 'react';
import { styled } from 'styled-system/jsx';

const StyledSvg = styled(ark.svg);

export type SparklesIconProps = ComponentProps<typeof StyledSvg>;

export const SparklesIcon = (props: SparklesIconProps) => (
  <StyledSvg
    viewBox="0 0 24 27"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    width="1em"
    height="1em"
    {...props}
  >
    <path
      d="M20 3.37527V7.87527M22 5.62527H18M4 19.1253V21.3753M5 20.2503H3M9.93694 17.4378C9.84766 17.0484 9.66728 16.6931 9.41456 16.4088C9.16184 16.1245 8.84601 15.9216 8.49994 15.8212L2.36494 14.0414C2.26027 14.008 2.16815 13.9371 2.10255 13.8394C2.03696 13.7417 2.00146 13.6227 2.00146 13.5003C2.00146 13.3779 2.03696 13.2588 2.10255 13.1612C2.16815 13.0635 2.26027 12.9926 2.36494 12.9592L8.49994 11.1783C8.84589 11.0779 9.16163 10.8752 9.41434 10.5911C9.66705 10.307 9.84751 9.9519 9.93694 9.56278L11.5189 2.66091C11.5483 2.54269 11.6113 2.43854 11.6983 2.36435C11.7852 2.29016 11.8913 2.25 12.0004 2.25C12.1096 2.25 12.2157 2.29016 12.3026 2.36435C12.3896 2.43854 12.4525 2.54269 12.4819 2.66091L14.0629 9.56278C14.1522 9.95211 14.3326 10.3074 14.5853 10.5917C14.838 10.876 15.1539 11.079 15.4999 11.1794L21.6349 12.958C21.7404 12.9908 21.8335 13.0615 21.8998 13.1595C21.9661 13.2574 22.002 13.3772 22.002 13.5003C22.002 13.6234 21.9661 13.7431 21.8998 13.8411C21.8335 13.939 21.7404 14.0098 21.6349 14.0425L15.4999 15.8212C15.1539 15.9216 14.838 16.1245 14.5853 16.4088C14.3326 16.6931 14.1522 17.0484 14.0629 17.4378L12.4809 24.3397C12.4515 24.4579 12.3886 24.562 12.3016 24.6362C12.2147 24.7104 12.1086 24.7506 11.9994 24.7506C11.8903 24.7506 11.7842 24.7104 11.6973 24.6362C11.6103 24.562 11.5473 24.4579 11.5179 24.3397L9.93694 17.4378Z"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
    />
  </StyledSvg>
);
