import React from 'react';
import { Button } from 'react-bootstrap';
import styles from '../css/UniClienteUniPunto.module.css';

interface CupsToggleButtonProps {
    show: boolean;
    onToggle: () => void;
    type: 'electric' | 'gas';
}

export const CupsToggleButton: React.FC<CupsToggleButtonProps> = ({ show, onToggle, type }) => {
    const labels = {
        electric: {
            add: 'De Click aquí para Agregar CUPS Eléctrico',
        },
        gas: {
            add: 'De Click aquí para Agregar CUPS Gas',
        },
    };

    return (
        <div className="d-flex justify-content-end mb-3">
            {!show && (
                <Button
                    title={labels[type].add}
                    aria-label={labels[type].add}
                    variant="outline-secondary"
                    id={`agregar${type === 'electric' ? 'CupElectrico' : 'CupGas'}`}
                    className={`${styles.toggleButton} border-3`}
                    onClick={onToggle}
                >
                    <i className="bx bx-plus" aria-hidden="true"></i>
                </Button>
            )}
        </div>
    );
};