'use client';

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

/**
 * FABs component
 ** description
 */

const sizes = {
    small: 24,
    default: 24,
    large: 36,
    extended: 24,
};

export const FAB = forwardRef<HTMLButtonElement, FABProps>(
    (
        {
            variant,
            disabled,
            icon,
            centralRipple = false,
            size = 'default',
            elevated,
            ...props
        },
        ref,
    ) => (
        <ButtonLayout
            {...props}
            centralRipple={centralRipple}
            className={`m3-fab m3-${size}-fab ${!(elevated ?? false) && 'without-elevation'}`}
            disabled={disabled}
            ref={ref}
            variant={variant ? variant : 'surface'}
        >
            <Icon iconSize={sizes[size]} svgSize={sizes[size]}>
                {icon}
            </Icon>
            {size === 'extended' ? (
                <span className={'label-large'}>{props.children}</span>
            ) : (
                <></>
            )}
        </ButtonLayout>
    ),
);