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="5 5 16 16" fill="inherit" xmlns="http://www.w3.org/2000/svg" {...props}>
    <path d="M13.7499 13.75H16.3749V12.875H13.7499V13.75Z" />
    <path d="M15.4999 17.25H18.1249V16.375H15.4999V17.25Z" />
    <path d="M14.6249 15.5H17.2499V14.625H14.6249V15.5Z" />
    <path d="M12.4386 13.75C12.4355 13.3808 12.337 13.0187 12.1527 12.6989C11.9684 12.379 11.7045 12.1122 11.3867 11.9244L14.6249 6.3125L13.8676 5.875L10.5532 11.6176C10.1463 11.5267 9.72319 11.5392 9.32244 11.6541C8.9217 11.769 8.55615 11.9825 8.25925 12.2751C6.62142 13.855 6.74825 17.5484 6.75425 17.705C6.75877 17.818 6.80685 17.9248 6.88841 18.0031C6.96998 18.0814 7.07868 18.1251 7.19175 18.125H13.7504C13.8422 18.125 13.9317 18.0961 14.0062 18.0424C14.0807 17.9887 14.1364 17.913 14.1654 17.8258C14.1945 17.7387 14.1954 17.6447 14.168 17.5571C14.1406 17.4694 14.0864 17.3926 14.0129 17.3375C12.4643 16.1755 12.4386 13.7735 12.4386 13.75ZM10.2192 12.4362C10.5694 12.4401 10.9046 12.5788 11.1551 12.8235C11.4056 13.0682 11.5521 13.4 11.5642 13.75C11.5642 13.7667 11.565 13.841 11.5715 13.9551L8.99053 12.8073C9.16053 12.6671 9.3567 12.5621 9.56764 12.4984C9.77857 12.4347 10.0001 12.4136 10.2192 12.4362ZM11.759 17.25C11.4094 16.8939 11.1866 16.4327 11.1249 15.9375H10.2499C10.2812 16.4031 10.4268 16.8539 10.6735 17.25H9.70085C9.52091 16.6822 9.41143 16.0945 9.37487 15.5H8.49987C8.52811 16.0927 8.62579 16.6801 8.7909 17.25H7.62487C7.63843 16.4466 7.75175 14.6722 8.41355 13.5082L11.7092 14.9738C11.8678 15.796 12.2055 16.5732 12.6985 17.25H11.759Z" />
  </svg>
);

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

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