'use client';

import React, { 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';
import { Typography } from '../../typography/typography';

/**
 * Button component
 ** description
 */

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

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