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 18 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
    <path
      d="M14.625 6.875H13.5V8H14.625C15.0724 8.00049 15.5013 8.17844 15.8177 8.4948C16.1341 8.81116 16.312 9.2401 16.3125 9.6875V11.9375H17.4375V9.6875C17.4366 8.94184 17.14 8.22697 16.6128 7.69972C16.0855 7.17246 15.3707 6.87586 14.625 6.875Z"
      fill="#1F7CFF"
    />
    <path
      d="M13.5 1.25C13.8338 1.25 14.16 1.34897 14.4375 1.5344C14.715 1.71982 14.9313 1.98337 15.059 2.29172C15.1868 2.60007 15.2202 2.93937 15.1551 3.26671C15.09 3.59406 14.9292 3.89474 14.6932 4.13074C14.4572 4.36674 14.1566 4.52746 13.8292 4.59258C13.5019 4.65769 13.1626 4.62427 12.8542 4.49655C12.5459 4.36882 12.2823 4.15253 12.0969 3.87502C11.9115 3.59752 11.8125 3.27126 11.8125 2.9375C11.8125 2.48995 11.9903 2.06072 12.3068 1.74426C12.6232 1.42779 13.0524 1.25 13.5 1.25ZM13.5 0.125C12.9437 0.125 12.4 0.28995 11.9375 0.598992C11.4749 0.908033 11.1145 1.34729 10.9016 1.8612C10.6887 2.37512 10.633 2.94062 10.7415 3.48619C10.8501 4.03176 11.1179 4.5329 11.5113 4.92624C11.9046 5.31957 12.4057 5.58744 12.9513 5.69596C13.4969 5.80448 14.0624 5.74878 14.5763 5.53591C15.0902 5.32304 15.5295 4.96255 15.8385 4.50004C16.1475 4.03753 16.3125 3.49376 16.3125 2.9375C16.3125 2.19158 16.0162 1.47621 15.4887 0.948762C14.9613 0.421316 14.2459 0.125 13.5 0.125Z"
      fill="#1F7CFF"
    />
    <path
      d="M12.9375 15.875H11.8125V14.75C11.812 14.3026 11.6341 13.8737 11.3177 13.5573C11.0013 13.2409 10.5724 13.063 10.125 13.0625H7.875C7.4276 13.063 6.99866 13.2409 6.6823 13.5573C6.36594 13.8737 6.18799 14.3026 6.1875 14.75V15.875H5.0625V14.75C5.06338 14.0043 5.35998 13.2895 5.88723 12.7622C6.41449 12.235 7.12935 11.9384 7.875 11.9375H10.125C10.8707 11.9384 11.5855 12.235 12.1128 12.7622C12.64 13.2895 12.9366 14.0043 12.9375 14.75V15.875Z"
      fill="#1F7CFF"
    />
    <path
      d="M9 6.3125C9.33376 6.3125 9.66002 6.41147 9.93752 6.5969C10.215 6.78232 10.4313 7.04587 10.559 7.35422C10.6868 7.66257 10.7202 8.00187 10.6551 8.32922C10.59 8.65656 10.4292 8.95724 10.1932 9.19324C9.95724 9.42924 9.65656 9.58996 9.32922 9.65508C9.00187 9.72019 8.66257 9.68677 8.35422 9.55905C8.04587 9.43132 7.78232 9.21503 7.5969 8.93752C7.41147 8.66002 7.3125 8.33376 7.3125 8C7.3125 7.55245 7.49029 7.12322 7.80676 6.80676C8.12322 6.49029 8.55245 6.3125 9 6.3125ZM9 5.1875C8.44374 5.1875 7.89997 5.35245 7.43746 5.66149C6.97495 5.97053 6.61446 6.40979 6.40159 6.9237C6.18872 7.43762 6.13302 8.00312 6.24154 8.54869C6.35006 9.09426 6.61793 9.5954 7.01126 9.98874C7.4046 10.3821 7.90574 10.6499 8.45131 10.7585C8.99688 10.867 9.56238 10.8113 10.0763 10.5984C10.5902 10.3855 11.0295 10.0251 11.3385 9.56254C11.6475 9.10003 11.8125 8.55626 11.8125 8C11.8125 7.25408 11.5162 6.53871 10.9887 6.01126C10.4613 5.48382 9.74592 5.1875 9 5.1875Z"
      fill="#1F7CFF"
    />
    <path
      d="M4.5 6.875H3.375C2.62935 6.87588 1.91449 7.17248 1.38723 7.69973C0.859976 8.22699 0.563378 8.94185 0.5625 9.6875V11.9375H1.6875V9.6875C1.68799 9.2401 1.86594 8.81116 2.1823 8.4948C2.49866 8.17844 2.9276 8.00049 3.375 8H4.5V6.875Z"
      fill="#1F7CFF"
    />
    <path
      d="M4.5 1.25C4.83376 1.25 5.16002 1.34897 5.43752 1.5344C5.71503 1.71982 5.93132 1.98337 6.05905 2.29172C6.18677 2.60007 6.22019 2.93937 6.15508 3.26671C6.08996 3.59406 5.92924 3.89474 5.69324 4.13074C5.45724 4.36674 5.15656 4.52746 4.82922 4.59258C4.50187 4.65769 4.16257 4.62427 3.85422 4.49655C3.54587 4.36882 3.28232 4.15253 3.0969 3.87502C2.91147 3.59752 2.8125 3.27126 2.8125 2.9375C2.8125 2.48995 2.99029 2.06072 3.30676 1.74426C3.62322 1.42779 4.05245 1.25 4.5 1.25ZM4.5 0.125C3.94374 0.125 3.39997 0.28995 2.93746 0.598992C2.47495 0.908033 2.11446 1.34729 1.90159 1.8612C1.68872 2.37512 1.63302 2.94062 1.74154 3.48619C1.85006 4.03176 2.11793 4.5329 2.51126 4.92624C2.9046 5.31957 3.40574 5.58744 3.95131 5.69596C4.49688 5.80448 5.06238 5.74878 5.5763 5.53591C6.09021 5.32304 6.52947 4.96255 6.83851 4.50004C7.14755 4.03753 7.3125 3.49376 7.3125 2.9375C7.3125 2.19158 7.01618 1.47621 6.48874 0.948762C5.96129 0.421316 5.24592 0.125 4.5 0.125Z"
      fill="#1F7CFF"
    />
  </svg>
);

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

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