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 ChevronUpDownIconProps = ComponentProps<typeof StyledSvg>;

export const ChevronUpDownIcon = (props: ChevronUpDownIconProps) => (
  <StyledSvg
    viewBox="0 0 40 40"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    width="1em"
    height="1em"
    {...props}
  >
    <path
      d="M20.0001 5.18457C19.6318 5.18457 19.2635 5.33521 18.8617 5.67007L7.57822 14.8274C7.29365 15.0786 7.12622 15.4301 7.12622 15.9324C7.12622 16.8029 7.77908 17.4558 8.66636 17.4558C9.01794 17.4558 9.38622 17.3219 9.77129 17.0205L20.0001 8.68343L30.2289 17.0205C30.6139 17.3219 30.9822 17.4558 31.3505 17.4558C32.2211 17.4558 32.8739 16.8029 32.8739 15.9324C32.8739 15.4301 32.7065 15.0786 32.4219 14.8274L21.1384 5.65328C20.7366 5.33521 20.3851 5.18457 20.0001 5.18457ZM20.0001 34.8163C20.3851 34.8163 20.7366 34.6656 21.1384 34.3475L32.4219 25.1734C32.7065 24.9223 32.8739 24.5707 32.8739 24.0685C32.8739 23.1979 32.2211 22.5284 31.3505 22.5284C30.9822 22.5284 30.6139 22.679 30.2289 22.9803L20.0001 31.3174L9.77129 22.9803C9.38622 22.679 9.01794 22.5284 8.66636 22.5284C7.77908 22.5284 7.12622 23.1979 7.12622 24.0685C7.12622 24.5707 7.29365 24.9223 7.57822 25.1734L18.8617 34.3308C19.2635 34.6656 19.6318 34.8163 20.0001 34.8163Z"
      fill="currentColor"
    />
  </StyledSvg>
);
