'use client';

import React from 'react';
import { Tooltip } from 'antd';
import { Plus } from 'lucide-react';
import { ButtonHeaderIcon } from '@/components/ui';
import { ICON_SIZE_MD } from '@/components/icons';
import headerIconStyles from '@/components/ui/buttons/ButtonHeaderIcon/ButtonHeaderIcon.module.scss';

export type ListPageHeaderCreateButtonProps = {
    /** Rótulo completo (tooltip + title + aria-label). pt-BR. */
    label: string;
    onClick: () => void;
    'data-testid'?: string;
    className?: string;
    disabled?: boolean;
};

/**
 * Ação «Cadastrar» no header de listagem — **só ícone 「+」** (nunca botão largo com texto em desktop).
 * Preferência produto: header 「+」 + FAB quando o módulo já usa ambos.
 */
export function ListPageHeaderCreateButton({
    label,
    onClick,
    'data-testid': dataTestId,
    className,
    disabled,
}: ListPageHeaderCreateButtonProps) {
    return (
        <Tooltip title={label}>
            <span style={{ display: 'inline-block' }}>
                <ButtonHeaderIcon
                    data-testid={dataTestId}
                    icon={<Plus size={ICON_SIZE_MD} aria-hidden />}
                    title={label}
                    aria-label={label}
                    onClick={onClick}
                    disabled={disabled}
                    className={[headerIconStyles.btnHeaderIcon, className].filter(Boolean).join(' ')}
                />
            </span>
        </Tooltip>
    );
}