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="M6.77566 0C7.04293 0 7.17678 0.323143 6.98779 0.512132L4.21205 3.28787C4.0949 3.40503 3.90495 3.40503 3.78779 3.28787L1.01205 0.512132C0.823064 0.323142 0.956914 0 1.22419 0H6.77566Z"
      fill="#6E6F7A"
    />
  </svg>
);

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

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