'use client';

import { forwardRef } from 'react';
import { ButtonProps } from './button.types';
import { bool, oneOf, string } from 'prop-types';
import { ButtonLayout } from '../button-layout/button-layout';
import { IconWrapper } from '../../icon/icon-wrapper';

/**
 * Button component
 ** description
 */

export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
    (
        {
            icon = undefined,
            className = '',
            disabled = false,
            variant = 'filled',
            iconPlace = 'left',
            centralRipple = false,
            ...props
        },
        ref,
    ) => (
        <ButtonLayout
            {...props}
            centralRipple={centralRipple}
            className={`${variant} ${className}`}
            disabled={disabled}
            ref={ref}
        >
            <IconWrapper icon={icon} iconPlace={iconPlace}>
                <span className={'label-large'}>{props.children}</span>
            </IconWrapper>
        </ButtonLayout>
    ),
);

Button.propTypes = {
    icon: string,
    children: string,
    centralRipple: bool,
    variant: oneOf(['filled', 'outlined', 'elevated', 'tonal', 'text']),
};