'use client';

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

export type ListingPageOptionsButtonProps = {
    onClick: () => void;
    expanded?: boolean;
    'data-testid'?: string;
    ariaLabel?: string;
    tooltipTitle?: string;
    className?: string;
};

/**
 * Botão "Mais opções" do header de listagens (três pontos verticais), à esquerda de Filtrar/Exportar.
 */
export function ListingPageOptionsButton({
    onClick,
    expanded = false,
    'data-testid': dataTestId,
    ariaLabel = 'Mais opções da listagem',
    tooltipTitle = 'Colunas visíveis e outras opções da listagem',
    className,
}: ListingPageOptionsButtonProps) {
    return (
        <Tooltip title={tooltipTitle}>
            <span style={{ display: 'inline-block' }}>
                <ButtonHeaderIcon
                    data-testid={dataTestId}
                    icon={
                        <Ellipsis
                            size={ICON_SIZE_MD}
                            aria-hidden
                            rotate={90}
                            style={{ fontSize: 18 }}
                        />
                    }
                    title="Mais opções"
                    aria-label={ariaLabel}
                    aria-expanded={expanded}
                    aria-haspopup="dialog"
                    onClick={onClick}
                    className={className ?? headerIconStyles.btnHeaderIcon}
                />
            </span>
        </Tooltip>
    );
}