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
    width="16"
    height="16"
    viewBox="0 0 16 16"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    {...props}
  >
    <path d="M15.5 5.5V10.5H14.5L13.5 7.5V10.5H12.5V5.5H13.5L14.5 8.5V5.5H15.5Z" />
    <path d="M10.6667 10.5H9.33325C9.11234 10.4997 8.90054 10.4119 8.74433 10.2557C8.58812 10.0995 8.50025 9.88766 8.5 9.66675V6.33325C8.50025 6.11234 8.58812 5.90054 8.74433 5.74433C8.90054 5.58812 9.11234 5.50025 9.33325 5.5H10.6667C10.8877 5.50025 11.0995 5.58812 11.2557 5.74433C11.4119 5.90054 11.4997 6.11234 11.5 6.33325V9.66675C11.4997 9.88766 11.4119 10.0995 11.2557 10.2557C11.0995 10.4119 10.8877 10.4997 10.6667 10.5ZM9.5 9.5H10.5V6.5H9.5V9.5Z" />
    <path d="M6.66675 10.5H4.5V9.5H6.5V8.5H5.5C5.23486 8.49974 4.98066 8.39429 4.79319 8.20681C4.60571 8.01934 4.50026 7.76514 4.5 7.5V6.33325C4.50025 6.11234 4.58812 5.90054 4.74433 5.74433C4.90054 5.58812 5.11234 5.50025 5.33325 5.5H7.5V6.5H5.5V7.5H6.5C6.76514 7.50026 7.01934 7.60571 7.20681 7.79319C7.39429 7.98066 7.49974 8.23486 7.5 8.5V9.66675C7.49975 9.88766 7.41188 10.0995 7.25567 10.2557C7.09946 10.4119 6.88766 10.4997 6.66675 10.5Z" />
    <path d="M2.66675 10.5H1.33325C1.11234 10.4997 0.900541 10.4119 0.744331 10.2557C0.588121 10.0995 0.500251 9.88766 0.5 9.66675V8.5H1.5V9.5H2.5V5.5H3.5V9.66675C3.49975 9.88766 3.41188 10.0995 3.25567 10.2557C3.09946 10.4119 2.88766 10.4997 2.66675 10.5Z" />
  </svg>
);

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

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