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 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
    <path d="M6.75126 2.7068C6.52204 3.68541 6.49085 4.69999 6.65953 5.69083C6.82821 6.68168 7.19334 7.62878 7.73346 8.47643C8.27357 9.32407 8.97776 10.0551 9.80458 10.6266C10.6314 11.1981 11.5642 11.5984 12.548 11.8041C12.0307 12.3392 11.4112 12.765 10.7263 13.0561C10.0413 13.3472 9.30482 13.4977 8.56056 13.4987C8.49131 13.4987 8.42146 13.5013 8.35166 13.4987C7.05599 13.4529 5.81731 12.9547 4.85075 12.0906C3.88418 11.2265 3.25081 10.0512 3.06063 8.76875C2.87044 7.48629 3.13547 6.17773 3.80967 5.07034C4.48387 3.96295 5.52466 3.12669 6.75126 2.7068ZM7.49001 1.5C7.46074 1.50005 7.43153 1.50266 7.40271 1.5078C5.81059 1.79059 4.37942 2.65251 3.38485 3.92753C2.39029 5.20254 1.90269 6.80048 2.01597 8.41355C2.12925 10.0266 2.8354 11.5407 3.9984 12.6642C5.1614 13.7877 6.69899 14.4412 8.31501 14.4986C8.39706 14.5016 8.47911 14.4986 8.56046 14.4986C9.60987 14.4992 10.644 14.2471 11.5754 13.7636C12.5068 13.2801 13.308 12.5794 13.9115 11.7208C13.9604 11.6469 13.9889 11.5613 13.9943 11.4728C13.9996 11.3842 13.9815 11.2958 13.9418 11.2165C13.902 11.1372 13.8421 11.0698 13.7681 11.021C13.694 10.9722 13.6084 10.9438 13.5198 10.9387C12.5209 10.851 11.5555 10.5349 10.6983 10.0146C9.84106 9.49439 9.11494 8.784 8.57605 7.93837C8.03716 7.09274 7.69993 6.13452 7.59045 5.13777C7.48096 4.14102 7.60213 3.13245 7.94461 2.19C7.97375 2.1146 7.98445 2.03332 7.97582 1.95295C7.96719 1.87257 7.93949 1.79542 7.89501 1.72792C7.85054 1.66042 7.79058 1.60452 7.72014 1.56487C7.64969 1.52523 7.57079 1.50299 7.49001 1.5Z" />
  </svg>
);

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

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