{{-- 
    Reusable Terms Modal Component
    Usage: 
    <x-terms-modal 
        id="termsModal" 
        title="Términos y Condiciones"
        content-view="frontend.legal.user-agreement-content"
    />
--}}
@props([
    'id',
    'title',
    'contentView',
    'size' => 'lg', // sm, md, lg, xl
])

<div class="modal fade" id="{{ $id }}" tabindex="-1" aria-labelledby="{{ $id }}Label"
    aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-{{ $size }} modal-fullscreen-sm-down">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="{{ $id }}Label">{{ $title }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                @include($contentView)
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                    {{ t('close') }}
                </button>
                <button type="button" class="btn btn-astro-blood-red terms-accept-btn" data-bs-dismiss="modal"
                    data-terms-read="true" data-modal-id="{{ $id }}">
                    {{ t('i-read-and-accept') }}
                </button>
            </div>
        </div>
    </div>
</div>