import { forwardRef } from 'react';

import CheckboxButton from '../checkboxButton';
import Option from '../common/Option';
import { ReferenceType, BaseOptionProps } from '../common/Option/Option';

export type CheckboxOptionProps = Omit<BaseOptionProps, 'onChange'> & {
  /**
   * The checked state of the checkbox.
   */
  checked?: boolean;
  /**
   * Function to call when the checkbox option is clicked
   */
  onChange?: (value: boolean) => void;
};

/**
 * @deprecated Use `<ListItem />` instead (run codemod to migrate: **`npx @wise/wds-codemods@latest list-item`**).
 * @deprecatedSince 46.104.0
 * @see [Source](../listItem/ListItem.tsx)
 * @see [Storybook](https://storybook.wise.design/?path=/docs/content-listitem--docs)
 * @see [Design docs](https://wise.design/components/list-item)
 * @see [Release notes](https://transferwise.atlassian.net/wiki/spaces/DS/pages/3647251055/List+Item+release+notes)
 */
const CheckboxOption = forwardRef<ReferenceType, CheckboxOptionProps>(
  ({ checked, disabled, onChange, ...rest }, reference) => {
    return (
      <Option
        {...rest}
        ref={reference}
        disabled={disabled}
        button={
          <CheckboxButton
            checked={checked}
            disabled={disabled}
            onChange={() => onChange?.(!checked)}
          />
        }
      />
    );
  },
);

export default CheckboxOption;
