import React, { FC } from "react";
import { CheckboxProps } from "./Checkbox.types";
import "./Checkbox.scss";
import { v4 as uuidv4 } from "uuid";

const Checkbox: FC<CheckboxProps> = ({
  id,
  label = null,
  checked = false,
  isIndeterminate = false,
  isDisabled = false,
  value,
  onClick,
  onChange,
}) => {
  const checkboxId = id || uuidv4();

  return (
    <div className='wrapper-gtc-rc'>
      <div className="checkbox-gtc-rc-div">
        <input
          className={`checkbox-gtc-rc ${isIndeterminate ? "indeterminate-gtc-rc" : ""}`}
          type="checkbox"
          id={checkboxId}
          value={value}
          checked={checked}
          disabled={isDisabled}
          onClick={onClick}
          onChange={(event) => onChange?.(event.target.checked)}
        />
        <label
          htmlFor={checkboxId}
          className={`cb-gtc-rc ${isDisabled ? "cb-gtc-rc-disabled" : ""}`}
        />
      </div>
      {label}
    </div>
  );
};

export default Checkbox;
