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

export const LeftArrowIcon = (props: LeftArrowIconProps) => (
  <StyledSvg
    viewBox="0 0 21 17"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    width="1em"
    height="1em"
    {...props}
  >
    <path
      d="M9.10036 11.988C9.33515 12.2116 9.34422 12.5831 9.12063 12.8178C8.89704 13.0526 8.52554 13.0617 8.29083 12.8381L9.10036 11.988ZM4.18214 8.92503C3.94736 8.70144 3.93828 8.32993 4.16187 8.09523C4.38546 7.86045 4.75697 7.85137 4.99167 8.07496L4.18214 8.92503ZM4.99167 8.92503C4.75697 9.14862 4.38546 9.13954 4.16187 8.90476C3.93828 8.67006 3.94736 8.29855 4.18214 8.07496L4.99167 8.92503ZM8.29083 4.16192C8.52554 3.93836 8.89704 3.94742 9.12063 4.18216C9.34422 4.4169 9.33515 4.78843 9.10036 5.01199L8.29083 4.16192ZM4.58691 9.08695C4.26275 9.08695 3.99995 8.82415 3.99995 8.5C3.99995 8.17584 4.26275 7.91304 4.58691 7.91304V9.08695ZM15.5434 7.91304C15.8676 7.91304 16.1304 8.17584 16.1304 8.5C16.1304 8.82415 15.8676 9.08695 15.5434 9.08695V7.91304ZM8.29083 12.8381L4.18214 8.92503L4.99167 8.07496L9.10036 11.988L8.29083 12.8381ZM4.18214 8.07496L8.29083 4.16192L9.10036 5.01199L4.99167 8.92503L4.18214 8.07496ZM4.58691 7.91304H15.5434V9.08695H4.58691V7.91304Z"
      fill="currentColor"
    />
    <path
      d="M9.10036 11.988C9.33515 12.2116 9.34422 12.5831 9.12063 12.8178C8.89704 13.0526 8.52554 13.0617 8.29083 12.8381M9.10036 11.988L8.29083 12.8381M9.10036 11.988L4.99167 8.07496M8.29083 12.8381L4.18214 8.92503M4.18214 8.92503C3.94736 8.70144 3.93828 8.32993 4.16187 8.09523C4.38546 7.86045 4.75697 7.85137 4.99167 8.07496M4.18214 8.92503L4.99167 8.07496M4.99167 8.92503C4.75697 9.14862 4.38546 9.13954 4.16187 8.90476C3.93828 8.67006 3.94736 8.29855 4.18214 8.07496M4.99167 8.92503L4.18214 8.07496M4.99167 8.92503L9.10036 5.01199M4.18214 8.07496L8.29083 4.16192M8.29083 4.16192C8.52554 3.93836 8.89704 3.94742 9.12063 4.18216C9.34422 4.4169 9.33515 4.78843 9.10036 5.01199M8.29083 4.16192L9.10036 5.01199M4.58691 9.08695C4.26275 9.08695 3.99995 8.82415 3.99995 8.5C3.99995 8.17584 4.26275 7.91304 4.58691 7.91304M4.58691 9.08695V7.91304M4.58691 9.08695H15.5434M4.58691 7.91304H15.5434M15.5434 7.91304C15.8676 7.91304 16.1304 8.17584 16.1304 8.5C16.1304 8.82415 15.8676 9.08695 15.5434 9.08695M15.5434 7.91304V9.08695"
      stroke="currentColor"
      strokeWidth="0.75"
    />
  </StyledSvg>
);
