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" {...props}>
    <path
      fillRule="evenodd"
      clipRule="evenodd"
      d="M5.0625 7.3125H15.1875C15.4858 7.31216 15.7717 7.19352 15.9826 6.98262C16.1935 6.77171 16.3122 6.48576 16.3125 6.1875V2.8125C16.3122 2.51424 16.1935 2.22829 15.9826 2.01738C15.7717 1.80648 15.4858 1.68784 15.1875 1.6875H2.8125C2.51424 1.68784 2.22829 1.80648 2.01738 2.01738C1.80648 2.22829 1.68784 2.51424 1.6875 2.8125V6.1875C1.68784 6.48576 1.80648 6.77171 2.01738 6.98262C2.22829 7.19352 2.51424 7.31216 2.8125 7.3125H3.9375H5.0625ZM15.1875 2.8125H2.8125V6.1875H15.1875V2.8125Z"
    />
    <path
      fillRule="evenodd"
      clipRule="evenodd"
      d="M15.1875 10.6875H9.5625C9.26424 10.6878 8.97829 10.8065 8.76738 11.0174C8.55648 11.2283 8.43784 11.5142 8.4375 11.8125V12.9375H5.0625V10.4546V9.5625V7.3125H3.9375V10.4546V12.9375C3.93784 13.2358 4.05648 13.5217 4.26738 13.7326C4.47829 13.9435 4.76424 14.0622 5.0625 14.0625H8.4375V15.1875C8.43784 15.4858 8.55648 15.7717 8.76738 15.9826C8.97829 16.1935 9.26424 16.3122 9.5625 16.3125H15.1875C15.4858 16.3122 15.7717 16.1935 15.9826 15.9826C16.1935 15.7717 16.3122 15.4858 16.3125 15.1875V11.8125C16.3122 11.5142 16.1935 11.2283 15.9826 11.0174C15.7717 10.8065 15.4858 10.6878 15.1875 10.6875ZM9.5625 11.8125V15.1875H15.1875V11.8125H9.5625Z"
    />
  </svg>
);

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

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