import { CheckboxStyle } from "./Checkbox.styled";
import Check from "../../assets/svgs/check.svg";
import { RadioContainer } from "../Radio/Radio.styled";
import { gray } from "../../core/colors/colors";

export type CheckboxProps = {
  id?: string;
  checked?: boolean;
  children?: string;
  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
  disable?: boolean;
  color?: string;
  backgroundColor?: string;
};

const Checkbox = ({
  id = "",
  checked,
  children,
  onChange,
  disable = false,
  color,
  backgroundColor,
}: CheckboxProps) => {
  return (
    <RadioContainer className="checkbox">
      <CheckboxStyle>
        <input
          id={id}
          type="checkbox"
          onChange={(e) => onChange(e)}
          checked={checked}
          disabled={disable}
          style={{
            borderColor: color,
            backgroundColor: backgroundColor,
          }}
        />
        {checked && (
          <Check
          // style={{
          //   stroke: disable ? gray[400] : color,
          //   cursor: disable ? "inherit" : "pointer",
          // }}
          />
        )}
      </CheckboxStyle>
      <span
        style={{
          color: disable ? gray[400] : "",
        }}
      >
        {children}
      </span>
    </RadioContainer>
  );
};

export default Checkbox;
