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 viewBox="0 0 8 4" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
    <path
      d="M1.22419 3.99573C0.956914 3.99573 0.823064 3.67259 1.01205 3.4836L3.78779 0.707863C3.90495 0.590706 4.0949 0.590706 4.21205 0.707863L6.98779 3.4836C7.17678 3.67259 7.04293 3.99573 6.77566 3.99573L1.22419 3.99573Z"
      fill="#6E6F7A"
    />
  </svg>
);

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

  height: ${({ size }) => size || '4px'};
  width: ${({ size }) => size || '8px'};
`;