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) => {
  const { color, ...restProps } = props;

  return (
    <svg
      width="14"
      height="14"
      viewBox="0 0 14 14"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      {...restProps}
    >
      <path
        d="M3.0625 0.875H0.875V7H3.0625V0.875Z"
        fill={getCssColorVariable(color) || '#DCDDE5'}
      />
      <path
        d="M10.0625 0.875H3.9375V7.35118L5.26846 9.34771L5.63828 11.9362C5.66886 12.1443 5.77308 12.3346 5.932 12.4725C6.09092 12.6103 6.29402 12.6866 6.5044 12.6875H6.5625C6.91048 12.6871 7.2441 12.5487 7.49016 12.3027C7.73621 12.0566 7.87462 11.723 7.875 11.375V8.75H11.375C11.839 8.74948 12.2838 8.56494 12.6119 8.23686C12.9399 7.90879 13.1245 7.46397 13.125 7V3.9375C13.1241 3.12555 12.8012 2.34712 12.227 1.77298C11.6529 1.19885 10.8744 0.875903 10.0625 0.875Z"
        fill={getCssColorVariable(color) || '#DCDDE5'}
      />
    </svg>
  );
};

export const ThumbDownFilledIcon = styled(Icon).attrs(() => ({
  'data-component-name': 'icons/ThumbDownFilledIcon/ThumbDownFilledIcon',
}))<IconProps>`
  height: ${({ size }) => size || '14px'};
  width: ${({ size }) => size || '14px'};
  color: ${({ color }) => color && getCssColorVariable(color)};
`;