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="1 1 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
    <path d="M8 1C6.61553 1 5.26216 1.41054 4.11101 2.17971C2.95987 2.94888 2.06266 4.04213 1.53285 5.32122C1.00303 6.6003 0.86441 8.00776 1.13451 9.36563C1.4046 10.7235 2.07129 11.9708 3.05026 12.9497C4.02922 13.9287 5.2765 14.5954 6.63437 14.8655C7.99224 15.1356 9.3997 14.997 10.6788 14.4672C11.9579 13.9373 13.0511 13.0401 13.8203 11.889C14.5895 10.7378 15 9.38447 15 8C15 6.14348 14.2625 4.36301 12.9497 3.05025C11.637 1.7375 9.85652 1 8 1ZM8 14C6.81332 14 5.65328 13.6481 4.66658 12.9888C3.67989 12.3295 2.91085 11.3925 2.45673 10.2961C2.0026 9.19974 1.88378 7.99334 2.11529 6.82946C2.3468 5.66557 2.91825 4.59647 3.75736 3.75736C4.59648 2.91824 5.66558 2.3468 6.82946 2.11529C7.99335 1.88378 9.19975 2.0026 10.2961 2.45672C11.3925 2.91085 12.3295 3.67988 12.9888 4.66658C13.6481 5.65327 14 6.81331 14 8C14 9.5913 13.3679 11.1174 12.2426 12.2426C11.1174 13.3679 9.5913 14 8 14Z" />
    <path d="M5.75 5.5C5.50278 5.5 5.2611 5.57331 5.05554 5.71066C4.84998 5.84801 4.68976 6.04324 4.59515 6.27165C4.50054 6.50005 4.47579 6.75139 4.52402 6.99386C4.57225 7.23634 4.6913 7.45907 4.86612 7.63388C5.04094 7.8087 5.26366 7.92775 5.50614 7.97598C5.74862 8.02421 5.99995 7.99946 6.22836 7.90485C6.45677 7.81024 6.65199 7.65002 6.78934 7.44446C6.92669 7.2389 7 6.99723 7 6.75C7.00134 6.58548 6.96991 6.42233 6.90757 6.27007C6.84522 6.11782 6.7532 5.97949 6.63686 5.86315C6.52052 5.74681 6.38219 5.65478 6.22993 5.59244C6.07767 5.53009 5.91453 5.49867 5.75 5.5Z" />
    <path d="M10.25 5.5C10.0028 5.5 9.7611 5.57331 9.55554 5.71066C9.34998 5.84801 9.18976 6.04324 9.09515 6.27165C9.00054 6.50005 8.97579 6.75139 9.02402 6.99386C9.07225 7.23634 9.1913 7.45907 9.36612 7.63388C9.54093 7.8087 9.76366 7.92775 10.0061 7.97598C10.2486 8.02421 10.4999 7.99946 10.7284 7.90485C10.9568 7.81024 11.152 7.65002 11.2893 7.44446C11.4267 7.2389 11.5 6.99723 11.5 6.75C11.5013 6.58548 11.4699 6.42233 11.4076 6.27007C11.3452 6.11782 11.2532 5.97949 11.1369 5.86315C11.0205 5.74681 10.8822 5.65478 10.7299 5.59244C10.5777 5.53009 10.4145 5.49867 10.25 5.5Z" />
    <path d="M8 12C8.69019 11.9988 9.36833 11.8191 9.96849 11.4783C10.5687 11.1375 11.0704 10.6471 11.425 10.055L10.57 9.555C10.3032 9.9981 9.92631 10.3647 9.47601 10.6192C9.0257 10.8737 8.51724 11.0074 8 11.0074C7.48276 11.0074 6.97431 10.8737 6.524 10.6192C6.07369 10.3647 5.69683 9.9981 5.43 9.555L4.575 10.055C4.92958 10.6471 5.43135 11.1375 6.03151 11.4783C6.63168 11.8191 7.30982 11.9988 8 12Z" />
  </svg>
);

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

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