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="M8 6.00293C8.39556 6.00293 8.78224 6.12023 9.11114 6.33999C9.44004 6.55975 9.69638 6.87211 9.84776 7.23756C9.99913 7.60301 10.0387 8.00515 9.96157 8.39311C9.8844 8.78107 9.69392 9.13744 9.41421 9.41714C9.13451 9.69685 8.77814 9.88733 8.39018 9.9645C8.00222 10.0417 7.60009 10.0021 7.23463 9.85069C6.86918 9.69931 6.55682 9.44297 6.33706 9.11407C6.1173 8.78517 6 8.39849 6 8.00293C6.0006 7.47268 6.2115 6.96432 6.58644 6.58937C6.96139 6.21443 7.46975 6.00353 8 6.00293ZM8 5.00293C7.40666 5.00293 6.82664 5.17888 6.33329 5.50852C5.83994 5.83817 5.45542 6.3067 5.22836 6.85488C5.0013 7.40306 4.94189 8.00626 5.05764 8.5882C5.1734 9.17014 5.45912 9.70469 5.87868 10.1243C6.29824 10.5438 6.83279 10.8295 7.41473 10.9453C7.99667 11.061 8.59987 11.0016 9.14805 10.7746C9.69623 10.5475 10.1648 10.163 10.4944 9.66964C10.8241 9.17629 11 8.59627 11 8.00293C11 7.20728 10.6839 6.44422 10.1213 5.88161C9.55871 5.319 8.79565 5.00293 8 5.00293Z" />
    <path d="M3.40382 2.6997L2.69679 3.40674L4.4497 5.15966L5.15674 4.45262L3.40382 2.6997Z" />
    <path d="M3.5 7.50293H1V8.50293H3.5V7.50293Z" />
    <path d="M4.4497 10.8462L2.69678 12.5991L3.40382 13.3062L5.15674 11.5532L4.4497 10.8462Z" />
    <path d="M8.5 12.5029H7.5V15.0029H8.5V12.5029Z" />
    <path d="M11.5503 10.8462L10.8433 11.5532L12.5962 13.3062L13.3032 12.5991L11.5503 10.8462Z" />
    <path d="M15 7.50293H12.5V8.50293H15V7.50293Z" />
    <path d="M12.5962 2.69971L10.8433 4.45263L11.5503 5.15966L13.3032 3.40674L12.5962 2.69971Z" />
    <path d="M8.5 1.00293H7.5V3.50293H8.5V1.00293Z" />
  </svg>
);

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

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