'use client';

import { forwardRef } from 'react';
import { Icon } from '../../components';
import { FABProps } from './fab.types';
import { bool, oneOf, string } from 'prop-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>(
    (
        {
            icon = 'edit',
            className = '',
            size = 'default',
            elevated = false,
            disabled = false,
            variant = 'surface',
            centralRipple = false,
            ...props
        },
        ref,
    ) => (
        <ButtonLayout
            {...props}
            centralRipple={centralRipple}
            className={`m3-fab m3-${size}-fab${!elevated ? ' without-elevation' : ''} ${variant} ${className}`}
            disabled={disabled}
            ref={ref}
        >
            <Icon iconSize={sizes[size]} svgSize={sizes[size]}>
                {icon}
            </Icon>
            {size === 'extended' ? (
                <span className={'label-large'}>{props.children}</span>
            ) : (
                <></>
            )}
        </ButtonLayout>
    ),
);

FAB.propTypes = {
    icon: string,
    elevated: bool,
    size: oneOf(['small', 'default', 'large', 'extended']),
    variant: oneOf(['surface', 'primary', 'secondary', 'tertiary']),
};