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

interface Props {
  tarifa: any;
}

const TarifaCard: React.FC<Props> = ({ tarifa }) => {
  const esElectrica = tarifa?.tipo === 'electrica';
  const nombre = tarifa?.nombre || '—';
  const activa = tarifa?.activa === true || tarifa?.activa === 1;

  return (
    <Card className={`${styles.tarjeta} shadow-sm border-0 card-3d`} aria-label={`Tarifa ${esElectrica ? 'eléctrica' : 'gas'} ${nombre}`}>
      <Card.Header className={styles.cabecera}>
        <h3 className={styles.titulo}>
          {esElectrica ? <Zap size={14} className={styles.icono} aria-hidden="true" /> : <Flame size={14} className={styles.icono} aria-hidden="true" />}
          <span>{nombre}</span>
        </h3>
        <span className={`badge ${activa ? 'bg-success' : 'bg-secondary'} ${styles.badgeEstado}`}>{activa ? 'Activa' : 'Inactiva'}</span>
      </Card.Header>
      <Card.Body className={styles.cuerpo}>
        <div className={styles.contenido}>
          <div className={styles.fila}>
            Tipo: <strong>{esElectrica ? 'Eléctrica' : 'Gas'}</strong>
          </div>
          {esElectrica && (
            <>
              <div className={styles.fila}>Tensión: <strong>{tarifa?.TipTen || '—'}</strong></div>
              <div className={styles.fila}>Periodos: <strong>{tarifa?.CanPerTar ?? '—'}</strong></div>
              <div className={styles.filaContacto}>
                <Gauge size={14} className={styles.icono} aria-hidden="true" />
                <span>Potencia: <strong>{tarifa?.MinPotCon ?? '—'} – {tarifa?.MaxPotCon ?? '—'} kW</strong></span>
              </div>
            </>
          )}
          {!esElectrica && (
            <div className={styles.filaContacto}>
              <Gauge size={14} className={styles.icono} aria-hidden="true" />
              <span>Consumo anual: <strong>{tarifa?.MinConAnu ?? '—'} – {tarifa?.MaxConAnu ?? '—'}</strong></span>
            </div>
          )}
        </div>
      </Card.Body>
    </Card>
  );
};

export default TarifaCard;