import React from "react"
import PropTypes from "prop-types"
import cx from "classnames"

const DEFAULT =
  "font-semibold border rounded-full px-2 py-px inline-block"
const COLORS = {
  gray: {
    solid: "bg-gray-800 border-gray-800 text-white",
    outline: "bg-transparent border-gray-800 text-gray-800",
    light: "bg-gray-50 border-gray-50 text-gray-800",
  },
  green: {
    solid: "bg-green-500 border-green-500 text-white",
    outline: "bg-transparent border-green-600 text-green-600",
    light: "bg-green-50 border-green-50 text-green-600",
  },
  red: {
    solid: "bg-red-500 border-red-500 text-white",
    outline: "bg-transparent border-red-600 text-red-600",
    light: "bg-red-50 border-red-50 text-red-600",
  },
  blue: {
    solid: "bg-blue-500 border-blue-500 text-white",
    outline: "bg-transparent border-blue-600 text-blue-600",
    light: "bg-blue-50 border-blue-50 text-blue-600",
  },
  yellow: {
    solid: "bg-yellow-500 border-yellow-500 text-white",
    outline: "bg-transparent border-yellow-600 text-yellow-600",
    light: "bg-yellow-50 border-yellow-50 text-yellow-600",
  },
}

const SIZES = {
  sm: 'text-xs leading-4',
  lg: 'text-sm leading-5',
}

const Badge = ({ children, color = "gray", variant = "solid", size = "sm", ...props }) => {
  const className = cx(props.className, DEFAULT, COLORS[color][variant], SIZES[size])

  return (
    <span {...props} className={className}>
      {children}
    </span>
  )
}

Badge.propTypes = {
  children: PropTypes.node.isRequired,
  className: PropTypes.string,
  color: PropTypes.oneOf(Object.keys(COLORS)),
  size: PropTypes.oneOf(["sm", "lg"]),
  variant: PropTypes.oneOf(["solid", "outline", "light"]),
}

export default Badge
export {COLORS}
