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

import type { IconProps } from '@redocly/theme/icons/types';

import { getCssColorVariable } from '@redocly/theme/core/utils';

const Icon = (props: IconProps) => (
  <svg
    width="16"
    height="16"
    viewBox="0 0 16 16"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    {...props}
  >
    <path
      d="M9.5 4L8.79295 4.70705L11.0859 7H5C4.73478 7 4.48043 7.10536 4.29289 7.29289C4.10536 7.48043 4 7.73478 4 8V14H5V8H11.0859L8.79295 10.2929L9.5 11L13 7.5L9.5 4Z"
      fill="#1A1C21"
    />
    <path d="M5 2H4V6H5V2Z" fill="#1A1C21" />
  </svg>
);

export const DirectionRightIcon = styled(Icon).attrs(() => ({
  'data-component-name': 'icons/DirectionRightIcon/DirectionRightIcon',
}))`
  path {
    fill: ${({ color }) => getCssColorVariable(color)};
  }

  height: ${({ size }) => size || '16px'};
  width: ${({ size }) => size || '16px'};
  vertical-align: middle;
`;