'use client';

import { forwardRef } from 'react';
import { Icon } from '../material-you-components';
import { IRippleProps } from '../ripple/ripple.types';
import { ButtonLayout } from '../button-layout/button-layout';
import { ButtonMainProps } from '../button-layout/button.types';

/**
 * Button component
 ** description
 */

export const Button = forwardRef<
    HTMLButtonElement,
    ButtonMainProps & IRippleProps
>(
    (
        { centralRipple = false, variant, disabled = false, icon, ...props },
        ref,
    ) => (
        <ButtonLayout
            {...props}
            centralRipple={centralRipple}
            disabled={disabled}
            ref={ref}
            variant={variant ? variant : 'filled'}
        >
            {icon ? <Icon iconSize={20}>{icon}</Icon> : <></>}
            <span className={'label-large'}>{props.children}</span>
        </ButtonLayout>
    ),
);