import classNames from "classnames";
import { StyleColorVariants, StyleColorVariantsMap } from "core/_variants";
import React from "react";

type Props = {
  className?: string | undefined;
  children: string;
  fontSize?: number;
  variant?: StyleColorVariants | undefined;
};

const hexagonStyles: StyleColorVariantsMap<string> = {
  gray: "stroke-gray-500",
  pink: "stroke-pink-500",
  blue: "stroke-blue-500",
  purple: "stroke-purple-500",
  red: "stroke-red-500",
  yellow: "stroke-yellow-600",
  emerald: "stroke-emerald-500",
  sky: "stroke-sky-500",
  "dark-coral": "stroke-dark-coral-500",
};

/**
 *  Hexagon sign
 * @param {string} children Characters to exclude from svg figure
 * @param {string|undefined} className Classes used to customize svg element
 * @param {number} fontSize Font size for excluding characters
 * @return {JSX.Element}
 */
export default function HexagonOutlined({
  className,
  children,
  fontSize = 24,
  variant,
}: Props): JSX.Element {
  const classes = variant ? hexagonStyles[variant] : "stroke-white";
  return (
    <svg
      viewBox="0 0 60 60"
      xmlns="http://www.w3.org/2000/svg"
      className={classNames(className, classes)}
    >
      <path
        // eslint-disable-next-line max-len
        d="M27 1.73205C28.8564 0.660254 31.1436 0.660254 33 1.73205L52.9808 13.2679C54.8372 14.3397 55.9808 16.3205 55.9808 18.4641V41.5359C55.9808 43.6795 54.8372 45.6603 52.9808 46.7321L33 58.2679C31.1436 59.3397 28.8564 59.3397 27 58.2679L7.01924 46.7321C5.16283 45.6603 4.01924 43.6795 4.01924 41.5359V18.4641C4.01924 16.3205 5.16283 14.3397 7.01924 13.2679L27 1.73205Z"
        fillRule="evenodd"
        fill="none"
      />
      <text
        x="50%"
        y="50%"
        dominantBaseline="middle"
        textAnchor="middle"
        fontSize={fontSize}
        fontWeight="bold"
        fontFamily="Poppins"
        fill="white"
        stroke="none"
      >
        {children}
      </text>
    </svg>
  );
}