'use client';

import React from 'react';
import { Button } from 'antd';
import type { ButtonProps } from 'antd';
import { Plus } from 'lucide-react';
import { ICON_SIZE_MD } from '@/components/icons';

export type ListPageCreateBarButtonProps = Omit<ButtonProps, 'type' | 'icon' | 'children'> & {
    /** Rótulo visível; omissão: só ícone "+" (44×44). */
    label?: string;
};

/**
 * Botão primário de criação para a barra fixa mobile ({@link MobilePageActionBar}).
 * Substitui o FAB redondo flutuante em viewports ≤768px.
 */
export function ListPageCreateBarButton({
    label,
    className,
    'aria-label': ariaLabelProp,
    title,
    ...props
}: ListPageCreateBarButtonProps) {
    const ariaLabel = ariaLabelProp ?? title ?? (typeof label === 'string' ? label : 'Cadastrar');
    const iconOnly = !label;

    return (
        <Button
            type="primary"
            icon={<Plus size={ICON_SIZE_MD} aria-hidden />}
            className={className}
            aria-label={ariaLabel}
            title={title ?? (iconOnly ? ariaLabel : undefined)}
            {...props}
        >
            {label ?? null}
        </Button>
    );
}