import classNames from "classnames";
import React from "react";

type Props = {
  /**
   * The way to provide `children` inside a component
   * via attribute instead of enclosed tag
   */
  label?: React.ReactNode;
  /**
   * When you will have both `children` and `label`
   * defined on a component it will choose `children`
   * to display
   */
  children?: React.ReactNode;
} & Omit<React.ComponentPropsWithoutRef<"input">, "type">;

/**
 * Customized `input[type="checkbox"]` component with label
 * 
 * All common input properties are inherited.
 * 
 * To define a label content either provide `label` attribute
 * or use common `children` property
 */
const Checkbox = ({label, children, className, ...props}: Props) => {
  
  if(label && !children) {
    children = label;
  }

  return (
    <label className={classNames(className, "flex items-center")}>
      <input type="checkbox" {...props} />
      {children !== undefined && <span>{children}</span>}
    </label>
  );
};
export default Checkbox;
