import React, { forwardRef } from 'react';
import cx from 'classnames';
import { Form } from 'react-bootstrap';
import type { FormCheckProps } from 'react-bootstrap';

const CLASS_NAME = 'FormSwitch';

interface SwitchProps extends Omit<FormCheckProps, 'type' | 'as'> {
    id: string;
    testId?: string;
    /**
     * Toggle addition of padding after the switch.
     * @default true
     */
    padding?: boolean;
}

/**
 * Switch is an interactive UI elements used to toggle an option on or off.
 *
 * @type atom
 * @status live
 * @tags form-elements
 */
export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
    ({ className, testId = CLASS_NAME, padding = true, ...bsProps }, ref) => (
        <Form.Check
            type="switch"
            className={cx(CLASS_NAME, className, { 'zero-padding': !padding })}
            data-testid={testId}
            ref={ref}
            {...bsProps}
        />
    )
);