import { forwardRef } from 'react';
import { CheckboxProps } from '@theme/components/types';
import { twMerge } from 'tailwind-merge';

const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>((props, ref) => {
  const { children, checked = false, error, ...rest } = props;

  return (
    <label className={twMerge('flex flex-col text-xs', props.className)}>
      <div className="flex items-center">
        <input
          data-testid="checkbox"
          type="checkbox"
          {...rest}
          ref={ref}
          defaultChecked={checked}
          className="w-4 h-4 shrink-0"
        />
        {children && <span className="ml-2">{children}</span>}
      </div>
      {error && (
        <span className="mt-1 text-sm text-error">{String(error.message)}</span>
      )}
    </label>
  );
});

Checkbox.displayName = 'Checkbox';

export { Checkbox };
