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="M5 11.5C5.55228 11.5 6 11.0523 6 10.5C6 9.94771 5.55228 9.5 5 9.5C4.44772 9.5 4 9.94771 4 10.5C4 11.0523 4.44772 11.5 5 11.5Z" />
    <path d="M11.5 11C12.0523 11 12.5 10.5523 12.5 10C12.5 9.44771 12.0523 9 11.5 9C10.9477 9 10.5 9.44771 10.5 10C10.5 10.5523 10.9477 11 11.5 11Z" />
    <path d="M6.5 6C7.05228 6 7.5 5.55228 7.5 5C7.5 4.44772 7.05228 4 6.5 4C5.94772 4 5.5 4.44772 5.5 5C5.5 5.55228 5.94772 6 6.5 6Z" />
    <path d="M7 8C7.27614 8 7.5 7.77614 7.5 7.5C7.5 7.22386 7.27614 7 7 7C6.72386 7 6.5 7.22386 6.5 7.5C6.5 7.77614 6.72386 8 7 8Z" />
    <path d="M11.5 3.5C12.0523 3.5 12.5 3.05228 12.5 2.5C12.5 1.94772 12.0523 1.5 11.5 1.5C10.9477 1.5 10.5 1.94772 10.5 2.5C10.5 3.05228 10.9477 3.5 11.5 3.5Z" />
    <path d="M14.5 2C14.7761 2 15 1.77614 15 1.5C15 1.22386 14.7761 1 14.5 1C14.2239 1 14 1.22386 14 1.5C14 1.77614 14.2239 2 14.5 2Z" />
    <path d="M8 12C8.27614 12 8.5 11.7761 8.5 11.5C8.5 11.2239 8.27614 11 8 11C7.72386 11 7.5 11.2239 7.5 11.5C7.5 11.7761 7.72386 12 8 12Z" />
    <path d="M8 15C4.15 15 1 11.85 1 8C1 4.15 4.15 1 8 1C8.05 1 8.1 1 8.15 1L8.85 1.05L8.7 1.65C8.65 1.85 8.6 2.1 8.6 2.3C8.6 3.7 9.7 4.8 11.1 4.8C11.6 4.8 12.1 4.65 12.55 4.35L13.2 5.1C13 5.3 12.9 5.55 12.9 5.8C12.9 6.45 13.55 7 14.25 6.75L14.85 6.5L14.95 7.15C15 7.45 15 7.75 15 8C15 11.85 11.85 15 8 15ZM7.65 2C4.5 2.2 2 4.8 2 8C2 11.3 4.7 14 8 14C11.3 14 14 11.3 14 8C14 7.95 14 7.85 14 7.8C12.85 7.85 11.9 6.95 11.9 5.8C11.9 5.75 11.9 5.75 11.9 5.7C11.65 5.75 11.4 5.8 11.1 5.8C9.15 5.8 7.6 4.25 7.6 2.3C7.6 2.2 7.6 2.1 7.65 2Z" />
  </svg>
);

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

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