import React from "react";

import { CharacterTheme } from "@dndbeyond/character-rules-engine/es";

import BaseSvg from "../../BaseSvg";

interface Props {
  theme: CharacterTheme;
  className: string;
}
export default class InitiativeBoxSvg extends React.PureComponent<Props> {
  static defaultProps = {
    className: "",
  };

  render() {
    const { theme, className } = this.props;

    let classNames: Array<string> = ["ddbc-initiative-box-svg", className];

    return (
      <BaseSvg className={classNames.join(" ")} viewBox="0 0 70 45">
        <polygon
          fill={theme.backgroundColor}
          points="68.8,22.5 55.8,43.3 14.2,43.3 1.2,22.5 14.2,1.8 14.3,1.7 55.7,1.7 55.8,1.8 "
        />
        <path
          fill={theme.themeColor}
          d="M59.1,0H10.9L0,17.2v10.5L10.9,45H59l11-17.2V17.2L59.1,0z M58.2,2.2l10,15.8v3L56.5,2.3l-0.1-0.1H58.2z M14.8,2.2h40.5
                        l0.1,0.1L68,22.5L55.3,42.8H14.7L2,22.5L14.8,2.2L14.8,2.2z M1.8,18l10-15.8h1.8l-0.1,0.1L1.8,21V18z M11.8,42.8L1.8,27v-3
                        l11.7,18.8H11.8z M68.2,27l-10,15.8h-1.7L68.2,24V27z"
        />
      </BaseSvg>
    );
  }
}
