import React, { FunctionComponent, ReactNode } from "react";

import "./styles.scss";

interface ICheckboxProps {
  label?: ReactNode;
  checked?: boolean;
  disabled?: boolean;
  onChange?: (checked: boolean) => void;
}

export const Checkbox: FunctionComponent<ICheckboxProps> = (props) => {
  const { label, checked = false, onChange, disabled } = props;

  return (
    <label className={`c-checkbox ${disabled ? "c-checkbox--disabled" : ""}`}>
      {label}
      <input
        type="checkbox"
        disabled={disabled}
        onChange={({ target }) => onChange?.(target.checked)}
        checked={checked}
        className="c-checkbox__input"
      />
      <div className="c-checkbox__checkmark-container">
        <span className="c-checkbox__checkmark" />
      </div>
    </label>
  );
};
