import React from 'react'
import { IconProps } from './icon'
interface Props extends IconProps {}

export const ButtonArrow: React.FC<Props> = ({
  width,
  height,
  fill = '#050505',
  className,
}: IconProps) => {
  return (
    <>
      <svg
        className={className}
        width={width}
        height={height}
        viewBox="0 0 7 12"
        fill={'none'}
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M1 1.33398L5.66667 6.00065L1 10.6673"
          stroke={className ? 'currentColor' : fill}
          strokeWidth="2"
          strokeLinecap="round"
          strokeLinejoin="round"
        />
      </svg>
    </>
  )
}

export const ButtonArrowRight: React.FC<Props> = ({
  width,
  height,
  fill = '#050505',
  className,
}: IconProps) => {
  return (
    <>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width={width}
        height={height}
        viewBox="0 0 24 24"
        fill="none"
      >
        <path d="M21 12H3H21Z" fill={fill} />
        <path
          d="M14 5L21 12M21 12L14 19M21 12H3"
          stroke={fill}
          strokeWidth="2"
          strokeLinecap="round"
          strokeLinejoin="round"
        />
      </svg>
    </>
  )
}
