import React, { useState } from 'react';
import { CheckBoxCheckSvg, CheckBoxUncheckSvg } from './icons/icons';

import React from 'react';

const Checkbox = ({
  checked = false,
  onChange,
  label,
  size = '26',
  disabled = false,
  className = '',
  labelClassName = '',
}) => {
  const handleClick = () => {
    if (!disabled && onChange) {
      onChange(!checked);
    }
  };

  return (
    <div
      className={`custom-checkbox ${disabled ? 'disabled' : ''} ${className}`}
      onClick={handleClick}
      style={{
        display: 'inline-flex',
        alignItems: 'center',
        gap: '8px',
        cursor: disabled ? 'not-allowed' : 'pointer',
        opacity: disabled ? 0.6 : 1,
      }}
    >
      <div className="custom-checkbox-icon">
        {checked ? (
          <CheckBoxCheckSvg size={size} />
        ) : (
          <CheckBoxUncheckSvg size={size} />
        )}
      </div>
      {label && <span className={labelClassName}>{label}</span>}
    </div>
  );
};

export default Checkbox;
