export function InvoiceItem(invoice) {
  const item = document.createElement('div');
  item.className = 'invoice-item';

  // Formatear fecha
  const formatDate = (dateString) => {
    const date = new Date(dateString);
    return date.toLocaleDateString('es-ES');
  };

  // Formatear moneda
  const formatCurrency = (amount) => {
    return new Intl.NumberFormat('es-ES', {
      style: 'currency',
      currency: 'EUR'
    }).format(amount);
  };

  // Obtener clase de estado
  const getStatusClass = (status) => {
    const statusMap = {
      'draft': 'status-draft',
      'validated': 'status-validated',
      'paid': 'status-paid',
      'unpaid': 'status-unpaid',
      'canceled': 'status-canceled'
    };
    return statusMap[status] || 'status-default';
  };

  // Obtener texto de estado
  const getStatusText = (status) => {
    const statusTextMap = {
      'draft': 'Borrador',
      'validated': 'Validada',
      'paid': 'Pagada',
      'unpaid': 'Impagada',
      'canceled': 'Cancelada'
    };
    return statusTextMap[status] || status;
  };

  item.innerHTML = /*html*/`
    <div class="invoice-checkbox">
      <input type="checkbox" id="invoice-${invoice.id}" />
    </div>
    <div class="invoice-number">${invoice.number}</div>
    <div class="invoice-status">
      <span class="status-badge ${getStatusClass(invoice.status)}">
        ${getStatusText(invoice.status)}
      </span>
    </div>
    <div class="invoice-client">
      <span class="client-icon">👤</span>
      ${invoice.clientName || 'Sin nombre'}
    </div>
    <div class="invoice-date">${formatDate(invoice.date)}</div>
    <div class="invoice-total">${formatCurrency(invoice.total)}</div>
    <div class="invoice-remain">${formatCurrency(invoice.remainToPay)}</div>
    <div class="invoice-actions">
      <button class="btn-view" data-invoice-id="${invoice.id}" title="Ver detalles">
        👁️
      </button>
    </div>
  `;

  // Event listener para el botón de ver
  const viewBtn = item.querySelector('.btn-view');
  viewBtn.addEventListener('click', () => {
    console.log('Ver factura:', invoice.id);
    // Aquí puedes agregar la lógica para ver los detalles
    alert(`Ver detalles de factura: ${invoice.number}`);
  });

  return item;
}