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

const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>((props, ref) => {
  // Part styling names the ROW, not the native box: when a caller stamps a
  // checkbox (see `partAttrs`), the attributes ride the label wrapper so the
  // whole line — box, text, links, spacing — is restylable, and the input
  // keeps every other prop it has today. No caller that omits them is
  // affected: both values are simply undefined and React drops them.
  const {
    children,
    checked = false,
    error,
    'data-part': partName,
    'data-state': partState,
    ...rest
  } = props as CheckboxProps & {
    'data-part'?: string;
    'data-state'?: string;
  };

  return (
    <label
      className={twMerge('flex flex-col text-xs', props.className)}
      data-part={partName}
      data-state={partState}
    >
      <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 };