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" viewBox="0 0 23 26" {...props}>
    <path d="M21.6594 6.61069L11.9094 0.923193C11.7852 0.850699 11.6439 0.8125 11.5 0.8125C11.3561 0.8125 11.2148 0.850699 11.0906 0.923193L1.34058 6.61069C1.21792 6.68225 1.11616 6.78471 1.04543 6.90785C0.974708 7.03099 0.937495 7.17052 0.9375 7.31253V18.6875C0.937495 18.8295 0.974708 18.9691 1.04543 19.0922C1.11616 19.2154 1.21792 19.3178 1.34058 19.3894L11.0906 25.0769C11.2148 25.1494 11.3561 25.1876 11.5 25.1876C11.6439 25.1876 11.7852 25.1494 11.9094 25.0769L21.6594 19.3894C21.7821 19.3178 21.8838 19.2154 21.9546 19.0922C22.0253 18.9691 22.0625 18.8295 22.0625 18.6875V7.31253C22.0625 7.17052 22.0253 7.03099 21.9546 6.90785C21.8838 6.78471 21.7821 6.68225 21.6594 6.61069ZM11.5 2.56566L19.6377 7.31253L11.5 12.0594L3.36232 7.31253L11.5 2.56566ZM2.5625 8.72726L10.6875 13.4666V22.9603L2.5625 18.221V8.72726ZM12.3125 22.9603V13.4666L20.4375 8.72726V18.221L12.3125 22.9603Z" />
  </svg>
);

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

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