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
    xmlns="http://www.w3.org/2000/svg"
    width="18"
    height="18"
    viewBox="0 0 18 18"
    fill="none"
    {...props}
  >
    <path d="M15.25 5.875H10.25V7.125H15.25V5.875Z" fill="currentColor" />
    <path d="M7.75 10.875H2.75V12.125H7.75V10.875Z" fill="currentColor" />
    <path
      d="M5.25 9C4.75555 9 4.2722 8.85338 3.86107 8.57867C3.44995 8.30397 3.12952 7.91352 2.9403 7.45671C2.75108 6.99989 2.70157 6.49723 2.79804 6.01227C2.8945 5.52732 3.1326 5.08186 3.48223 4.73223C3.83186 4.3826 4.27732 4.1445 4.76227 4.04804C5.24723 3.95157 5.74989 4.00108 6.20671 4.1903C6.66352 4.37952 7.05397 4.69995 7.32867 5.11107C7.60338 5.5222 7.75 6.00555 7.75 6.5C7.74926 7.16281 7.48562 7.79826 7.01694 8.26694C6.54826 8.73562 5.91281 8.99926 5.25 9ZM5.25 5.25C5.00277 5.25 4.7611 5.32331 4.55554 5.46066C4.34998 5.59801 4.18976 5.79324 4.09515 6.02165C4.00054 6.25005 3.97579 6.50139 4.02402 6.74386C4.07225 6.98634 4.1913 7.20907 4.36612 7.38388C4.54093 7.5587 4.76366 7.67775 5.00614 7.72598C5.24861 7.77421 5.49995 7.74946 5.72835 7.65485C5.95676 7.56024 6.15199 7.40002 6.28934 7.19446C6.42669 6.9889 6.5 6.74723 6.5 6.5C6.49967 6.16858 6.36787 5.85083 6.13352 5.61648C5.89917 5.38213 5.58142 5.25033 5.25 5.25Z"
      fill="currentColor"
    />
    <path
      d="M12.75 14C12.2555 14 11.7722 13.8534 11.3611 13.5787C10.95 13.304 10.6295 12.9135 10.4403 12.4567C10.2511 11.9999 10.2016 11.4972 10.298 11.0123C10.3945 10.5273 10.6326 10.0819 10.9822 9.73223C11.3319 9.3826 11.7773 9.1445 12.2623 9.04804C12.7472 8.95157 13.2499 9.00108 13.7067 9.1903C14.1635 9.37952 14.554 9.69995 14.8287 10.1111C15.1034 10.5222 15.25 11.0055 15.25 11.5C15.2493 12.1628 14.9856 12.7983 14.5169 13.2669C14.0483 13.7356 13.4128 13.9993 12.75 14ZM12.75 10.25C12.5028 10.25 12.2611 10.3233 12.0555 10.4607C11.85 10.598 11.6898 10.7932 11.5951 11.0216C11.5005 11.2501 11.4758 11.5014 11.524 11.7439C11.5723 11.9863 11.6913 12.2091 11.8661 12.3839C12.0409 12.5587 12.2637 12.6777 12.5061 12.726C12.7486 12.7742 12.9999 12.7495 13.2284 12.6549C13.4568 12.5602 13.652 12.4 13.7893 12.1945C13.9267 11.9889 14 11.7472 14 11.5C13.9997 11.1686 13.8679 10.8508 13.6335 10.6165C13.3992 10.3821 13.0814 10.2503 12.75 10.25Z"
      fill="currentColor"
    />
    <path
      d="M16.5 17.75H1.5C1.16859 17.7497 0.850846 17.6178 0.6165 17.3835C0.382155 17.1492 0.250347 16.8314 0.25 16.5V1.5C0.250347 1.16859 0.382155 0.850846 0.6165 0.6165C0.850846 0.382155 1.16859 0.250347 1.5 0.25H16.5C16.8314 0.250347 17.1492 0.382155 17.3835 0.6165C17.6178 0.850846 17.7497 1.16859 17.75 1.5V16.5C17.7497 16.8314 17.6178 17.1492 17.3835 17.3835C17.1492 17.6178 16.8314 17.7497 16.5 17.75ZM1.5 1.5V16.5H16.5V1.5H1.5Z"
      fill="currentColor"
    />
  </svg>
);

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

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