@props(['value', 'type' => 'boolean'])

@php
    $color = 'secondary';
    $text  = 'Desconocido';
    $title = ''; // Variable para el texto flotante

    if ($type === 'boolean') {
        $color = $value ? 'success' : 'danger';
        // Iconos visuales
        $text  = $value ? '<i class="fas fa-check"></i>' : '<i class="fas fa-times"></i>';
        // Texto para el tooltip
        $title = $value ? 'Activo' : 'Inactivo';
    }
    elseif ($type === 'pago') {
        $color = $value === 'PAGADO' ? 'success' : ($value === 'PENDIENTE' ? 'warning' : 'danger');
        $text  = $value;
        $title = 'Estado: ' . $value;
    }
    elseif ($type === 'factura') {
        $color = $value === 'COMPLETADA' ? 'success' : 'danger';
        $text  = $value;
        $title = 'Factura ' . $value;
    }
@endphp

{{-- 
    data-toggle="tooltip": Activa el comportamiento de Bootstrap.
    title: Define el texto que aparecerá al pasar el mouse.
--}}
<span class="badge badge-{{ $color }} px-2 py-1 shadow-sm" 
      data-toggle="tooltip" 
      title="{{ $title }}"
      style="cursor: help;"> {{-- Cursor de ayuda opcional para indicar que hay info extra --}}
    {!! $text !!}
</span>