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 14 12" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
    <path
      d="M13.125 4.25V0.75H9.625V2.0625H7.875C7.64302 2.06277 7.42061 2.15504 7.25658 2.31908C7.09254 2.48311 7.00027 2.70552 7 2.9375V5.5625H4.375V4.25H0.875V7.75H4.375V6.4375H7V9.0625C7.00027 9.29448 7.09254 9.51689 7.25658 9.68092C7.42061 9.84496 7.64302 9.93723 7.875 9.9375H9.625V11.25H13.125V7.75H9.625V9.0625H7.875V2.9375H9.625V4.25H13.125ZM3.5 6.875H1.75V5.125H3.5V6.875ZM10.5 8.625H12.25V10.375H10.5V8.625ZM10.5 1.625H12.25V3.375H10.5V1.625Z"
      fill="#0E8450"
    />
  </svg>
);

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

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