import * as React from 'react';
import { createComponent } from '@lit/react';
import Component from '../../components/button';
import { TAG_NAME } from '../../components/button/button.constants';
/**
 * `mdc-button` is a component that can be configured in various ways to suit different use cases.
 *
 * ## Button configuration
 *
 * The appearance of the button depends on combination of multiple attributes.
 *
 * ### Button Types
 *
 * The type of button is inferred based on the presence of slot and/or prefix and postfix icons/slots:
 *
 * - **Pill button**: Contains text value, commonly used for call to action, tags, or filters
 * - **Pill button with icons**: Contains an icon on the left or right side of the button
 * - **Icon button**: Represented by just an icon without any text
 *
 * ### Button Variants:
 *
 * Options for button backgrounds and borders:
 *
 * - **Primary**: Solid background color
 * - **Secondary**: Transparent background with solid border
 * - **Tertiary**: No background or border, text-only appearance
 *
 * ### Button Colors
 *
 * Color options for **Primary** and **Secondary** buttons:
 *
 * - **Default**: For standard actions
 * - **Positive**: For success or confirmation actions
 * - **Negative**: For destructive or error actions
 * - **Accent**: For informational actions
 * - **Promotional**: For promotional actions
 *
 * Color options for **Tertiary** buttons:
 *
 * - **Default**: For standard actions
 * - **Accent**: For informational actions
 * - **Negative**: For destructive or error actions
 *
 * ### Button Sizes
 *
 * Size options for different button configurations in REM:
 *
 * - **Pill button**: 40, 32, 28, 24
 * - **Icon button**: 64, 52, 40, 32, 28, 24
 * - **Tertiary icon button**: 20
 *
 * @dependency mdc-icon
 *
 * @tagname mdc-button
 *
 * @slot - Text label of the button.
 * @slot prefix - Content to be displayed before the text label.
 * @slot postfix - Content to be displayed after the text label.
 *
 * @csspart button-text - Text label of the button, passed in default slot
 * @csspart prefix - Content before the text label, passed in `prefix` slot
 * @csspart postfix - Content after the text label, passed in `postfix` slot
 * @csspart prefix-icon - Icon element displayed before the text label when `prefix-icon` attribute is set
 * @csspart postfix-icon - Icon element displayed after the text label when `postfix-icon` attribute is set
 *
 * @cssproperty --mdc-button-height - Height for button size
 * @cssproperty --mdc-button-background - Background of the button
 * @cssproperty --mdc-button-border-color - Border color of the button
 * @cssproperty --mdc-button-text-color - Text color of the button
 * @cssproperty --mdc-button-prefix-icon-size - Size of the prefix icon
 * @cssproperty --mdc-button-postfix-icon-size - Size of the postfix icon
 * @cssproperty --mdc-button-line-height - Line height of the button text
 *
 */
const reactWrapper = createComponent({
    tagName: TAG_NAME,
    elementClass: Component,
    react: React,
    events: {
        onClick: 'click',
        onKeyDown: 'keydown',
        onKeyUp: 'keyup',
        onFocus: 'focus',
    },
    displayName: 'Button',
});
export default reactWrapper;
