'use client';

import { forwardRef } from 'react';
import { Icon } from '../components';
import { ButtonProps } from './button.types';
import { ButtonLayout } from '../button-layout/button-layout';

/**
 * Button component
 ** description
 */

export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
    (
        { 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>
    ),
);