import React from 'react';
import { Button, Card } from 'react-bootstrap';
import { Flame, Trash2, Zap } from 'lucide-react';
import styles from '../css/UniClienteUniPunto.module.css';

export interface TarjetaSuministroProps {
    tipo: 'electrico' | 'gas';
    titulo: string;
    children: React.ReactNode;
    onEliminar?: () => void;
    etiquetaEliminar?: string;
}

export const TarjetaSuministro: React.FC<TarjetaSuministroProps> = ({
    tipo,
    titulo,
    children,
    onEliminar,
    etiquetaEliminar,
}) => {
    const Icono = tipo === 'electrico' ? Zap : Flame;
    const colorClase = tipo === 'electrico' ? 'text-primary' : 'text-danger';
    const tituloEliminar =
        etiquetaEliminar
        ?? (tipo === 'electrico'
            ? 'Eliminar suministro eléctrico'
            : 'Eliminar suministro de gas');

    return (
        <Card
            className={`mb-4 ${styles.tarjetaSuministro} ${
                tipo === 'electrico' ? styles.tarjetaSuministroElectrico : styles.tarjetaSuministroGas
            }`}
        >
            <Card.Header
                className={`${styles.tarjetaSuministroHeader} ${
                    tipo === 'electrico'
                        ? styles.tarjetaSuministroHeaderElectrico
                        : styles.tarjetaSuministroHeaderGas
                }`}
            >
                <div className="d-flex align-items-center justify-content-between gap-2">
                    <h5 className="mb-0 fw-semibold d-flex align-items-center">
                        <Icono size={20} className={`me-2 ${colorClase}`} aria-hidden />
                        {titulo}
                    </h5>
                    {onEliminar ? (
                        <Button
                            variant="outline-primary"
                            size="sm"
                            onClick={onEliminar}
                            title={tituloEliminar}
                            aria-label={tituloEliminar}
                            className={styles.botonEliminarSuministro}
                        >
                            <Trash2 size={16} aria-hidden />
                        </Button>
                    ) : null}
                </div>
            </Card.Header>
            <Card.Body className="p-4">{children}</Card.Body>
        </Card>
    );
};