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

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

const Icon = (props: IconProps) => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="14"
    height="14"
    viewBox="0 0 14 14"
    fill="none"
    {...props}
  >
    <path
      d="M12.8422 6.66036C12.8984 6.47286 12.9266 6.27911 12.9266 6.08224C12.9266 5.64005 12.7812 5.21505 12.5188 4.86818C12.575 4.68068 12.6031 4.48693 12.6031 4.29005C12.6031 3.84786 12.4578 3.42286 12.1953 3.07599C12.2516 2.88849 12.2797 2.69474 12.2797 2.49786C12.2797 1.69161 11.8 0.965052 11.0562 0.647865C10.9255 0.591503 10.7845 0.562777 10.6422 0.56349H1.25C0.973437 0.56349 0.75 0.786927 0.75 1.06349V6.75099C0.75 7.02755 0.973437 7.25099 1.25 7.25099H3.27031L4.61094 12.1072C4.82656 12.8901 5.54531 13.4369 6.35781 13.4369C6.82188 13.4369 7.25469 13.2526 7.575 12.9151C7.89531 12.5791 8.05937 12.1385 8.03594 11.6744L7.94219 9.75411H11.6906C11.8797 9.75411 12.0641 9.70411 12.2266 9.6088C12.8578 9.24161 13.25 8.57599 13.25 7.87443C13.25 7.43224 13.1047 7.00724 12.8422 6.66036ZM1.875 6.12443V1.68693H3.14062V6.12443H1.875ZM11.675 8.63068H6.7625L6.9125 11.7307C6.92188 11.9166 6.83906 12.0916 6.68437 12.2072C6.58906 12.2776 6.47188 12.3135 6.35469 12.3119C6.20497 12.3105 6.05977 12.2605 5.94087 12.1695C5.82198 12.0785 5.73581 11.9514 5.69531 11.8072L4.14062 6.17443V1.68693H10.6313C10.7874 1.75692 10.9201 1.87054 11.0132 2.01413C11.1063 2.15772 11.156 2.32515 11.1562 2.4963C11.1562 2.64786 11.1203 2.79161 11.0484 2.92286L10.8313 3.31974L11.1734 3.61661C11.2698 3.70003 11.347 3.80322 11.3998 3.91917C11.4527 4.03511 11.4799 4.16107 11.4797 4.28849C11.4797 4.44005 11.4437 4.5838 11.3719 4.71505L11.1547 5.11193L11.4969 5.4088C11.5932 5.49222 11.6704 5.59541 11.7232 5.71135C11.7761 5.82729 11.8033 5.95326 11.8031 6.08068C11.8031 6.23224 11.7672 6.37599 11.6953 6.50724L11.4766 6.90568L11.8188 7.20255C11.9151 7.28597 11.9923 7.38916 12.0451 7.5051C12.098 7.62104 12.1252 7.74701 12.125 7.87443C12.125 8.17286 11.9531 8.46036 11.675 8.63068Z"
      fill="currentColor"
    />
  </svg>
);

export const ThumbDownIcon = styled(Icon).attrs({
  'data-component-name': 'icons/ThumbDownIcon/ThumbDownIcon',
})``;