'use client';

import { Square } from 'lucide-react';
import { ICON_SIZE_MD } from '@/components/icons';
import React from 'react';
import styles from './ListingMobileSelectionMenuColumnTitle.module.scss';

export type ListingMobileSelectionMenuColumnTitleProps = {
    onToggle: () => void;
    'data-testid'?: string;
};

/**
 * Ícone no cabeçalho da coluna "menu" (mobile, modo inativo): ativa a coluna de checkboxes.
 * Oculto enquanto a selecção múltipla estiver ativa.
 */
export function ListingMobileSelectionMenuColumnTitle({
    onToggle,
    'data-testid': dataTestId = 'listing-mobile-select-toggle',
}: ListingMobileSelectionMenuColumnTitleProps) {
    const handleToggle = (e: React.MouseEvent<HTMLButtonElement>) => {
        e.stopPropagation();
        onToggle();
    };

    return (
        <div className={styles.headerCell}>
            <button
                type="button"
                className={styles.toggle}
                onClick={handleToggle}
                aria-pressed={false}
                aria-label="Selecionar vários registros na lista"
                data-testid={dataTestId}
            >
                <Square size={ICON_SIZE_MD} aria-hidden />
            </button>
        </div>
    );
}