import styled from 'styled-components';
import React from 'react';

const Svg = styled.svg<{ pointer?: boolean }>`
  ${({ pointer }) => (pointer ? 'cursor: pointer;' : '')}
`;

type ArrowLeftSimpleIconProps = {
  width?: number;
  height?: number;
  color?: string;
  onClick?: () => void;
};

export const ArrowLeftSimpleIcon = ({
  width = 24,
  height = 24,
  color = '#1E1E22',
  onClick,
}: ArrowLeftSimpleIconProps) => (
  <Svg
    pointer={Boolean(onClick)}
    onClick={onClick}
    width={width}
    height={height}
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M15.705 16.59 11.125 12l4.58-4.59L14.295 6l-6 6 6 6 1.41-1.41Z"
      fill={color}
    />
  </Svg>
);