/* -------------------------------------------------------------------------- */
/*                                   Imports                                  */
/* -------------------------------------------------------------------------- */

import classNames from "classnames";
import { StyleType } from "core/_variants";
import React from "react";
import { ReactComponent as DeleteIcon } from "../assets/svg/xmark.svg";

/* -------------------------------------------------------------------------- */
/*                               Component props                              */
/* -------------------------------------------------------------------------- */

type Props = {
  emphasis?: StyleType;
  children: React.ReactNode;
  className?: string;
  iconed?: boolean;
  onClick?: (element: any) => void;
  closeOption?: Boolean;
} & Omit<React.MouseEventHandler<HTMLSpanElement>, "">;

/* -------------------------------------------------------------------------- */
/*                          Component implementation                          */
/* -------------------------------------------------------------------------- */

function Badge({
  className,
  children,
  onClick,
  emphasis = "low",
  closeOption = false,
  ...props
}: Props): JSX.Element {
  return (
    <>
      <span
        className={classNames(
          "border-none p-2 rounded-md text-xs text-center",
          {
            "cursor-pointer": onClick,
            "border-transparent": emphasis == "low",
            "bg-blue-400 text-white rounded-xs": emphasis == "high",
            "border-gray-400 background-gray-200": emphasis == "medium",
          },
          className
        )}
        {...props}
      >
        {children}
        {closeOption && (
          <button onClick={onClick} className="h-4 w-5">
            <div>
              <DeleteIcon
                className="relative top-1 left-1 h-4 w-5 fill-white hover:fill-white stroke-white
            "
              />
            </div>
          </button>
        )}
      </span>
    </>
  );
}
export default Badge;
