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

export const ScrollTextIcon = (props: ScrollTextIconProps) => (
  <StyledSvg
    viewBox="0 0 42 42"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    width="1em"
    height="1em"
    {...props}
  >
    <path
      d="M26.25 21H17.5M26.25 14H17.5M33.25 29.75V8.75C33.25 7.82174 32.8813 6.9315 32.2249 6.27513C31.5685 5.61875 30.6783 5.25 29.75 5.25H7M7 5.25C7.92826 5.25 8.8185 5.61875 9.47487 6.27513C10.1313 6.9315 10.5 7.82174 10.5 8.75V33.25C10.5 34.1783 10.8687 35.0685 11.5251 35.7249C12.1815 36.3813 13.0717 36.75 14 36.75M7 5.25C6.07174 5.25 5.1815 5.61875 4.52513 6.27513C3.86875 6.9315 3.5 7.82174 3.5 8.75V12.25C3.5 12.7141 3.68437 13.1592 4.01256 13.4874C4.34075 13.8156 4.78587 14 5.25 14H10.5M14 36.75H35C35.9283 36.75 36.8185 36.3813 37.4749 35.7249C38.1313 35.0685 38.5 34.1783 38.5 33.25V31.5C38.5 31.0359 38.3156 30.5908 37.9874 30.2626C37.6592 29.9344 37.2141 29.75 36.75 29.75H19.25C18.7859 29.75 18.3408 29.9344 18.0126 30.2626C17.6844 30.5908 17.5 31.0359 17.5 31.5V33.25C17.5 34.1783 17.1313 35.0685 16.4749 35.7249C15.8185 36.3813 14.9283 36.75 14 36.75Z"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
    />
  </StyledSvg>
);
