import RcCheckbox from '@rc-component/checkbox';
import { CheckboxProps } from '../types';
import { forwardRef } from 'react';
import { InputRef } from '@rc-component/input/lib/interface';

export const Checkbox = forwardRef<InputRef, CheckboxProps>((props, ref) => {
  const { label, status = 'default', variant = 'outlined', className, children, ...rest } = props;

  const displayLabel = label || children;

  const wrapperClass = [
    'rc-checkbox-wrapper',
    `checkbox-status-${status}`,
    `checkbox-variant-${variant}`,
    rest.disabled ? 'rc-checkbox-wrapper-disabled' : '',
    className,
  ]
    .filter(Boolean)
    .join(' ');

  return (
    <label className={wrapperClass}>
      <span className="rc-checkbox-container">
        <RcCheckbox {...rest} prefixCls="rc-checkbox" />
        {/* HAPUS BARIS DI BAWAH INI */}
        {/* <span className="rc-checkbox-inner" /> */}
      </span>

      {displayLabel && <span className="rc-checkbox-label-text">{displayLabel}</span>}
    </label>
  );
});

Checkbox.displayName = 'Checkbox';