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

export const NotebookPenIcon = (props: NotebookPenIconProps) => (
  <StyledSvg
    viewBox="0 0 42 42"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    width="1em"
    height="1em"
    {...props}
  >
    <path
      d="M23.45 3.49994H10.5C9.57174 3.49994 8.6815 3.86869 8.02513 4.52507C7.36875 5.18144 7 6.07168 7 6.99994V34.9999C7 35.9282 7.36875 36.8184 8.02513 37.4748C8.6815 38.1312 9.57174 38.4999 10.5 38.4999H31.5C32.4283 38.4999 33.3185 38.1312 33.9749 37.4748C34.6313 36.8184 35 35.9282 35 34.9999V22.0499M3.5 10.4999H10.5M3.5 17.4999H10.5M3.5 24.4999H10.5M3.5 31.4999H10.5M37.4115 9.84527C38.1086 9.14815 38.5002 8.20265 38.5002 7.21677C38.5002 6.23089 38.1086 5.28539 37.4115 4.58827C36.7143 3.89115 35.7688 3.49951 34.783 3.49951C33.7971 3.49951 32.8516 3.89115 32.1545 4.58827L23.387 13.3593C22.9709 13.7751 22.6663 14.2891 22.5015 14.8538L21.0367 19.8763C20.9928 20.0269 20.9902 20.1865 21.0291 20.3384C21.068 20.4904 21.1471 20.6291 21.258 20.74C21.3689 20.8509 21.5076 20.93 21.6595 20.9689C21.8115 21.0078 21.9711 21.0052 22.1217 20.9613L27.1442 19.4965C27.7089 19.3316 28.2229 19.0271 28.6387 18.611L37.4115 9.84527Z"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
    />
  </StyledSvg>
);
