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

function Checkbox({ className, style, color, ...props }) {
  const classNames = cx(
    className,
    "design-custom-box",
    "design-checkbox",
    "text-base"
  )
  const colors = {
    blue: "var(--blue-500)",
    red: "var(--red-500)",
  }
  const styleOverride =
    color && color !== "green"
      ? {
          "--active-checkbox": colors[color],
        }
      : null

  return (
    <input
      className={classNames}
      style={{ ...styleOverride, ...style }}
      type="checkbox"
      {...props}
    />
  )
}

Checkbox.propTypes = {
  className: PropTypes.string,
  style: PropTypes.object,
  color: PropTypes.oneOf(["green", "blue", "red"]),
}

export default Checkbox
