<?php
/**
 * Modal component — with backdrop blur, scale animation, and Lucide close icon.
 *
 * @var string $id
 * @var string $title
 * @var string $size (small|medium|large|fullscreen)
 */
$id = $id ?? 'modal';
$title = $title ?? '';
$size = $size ?? 'medium';
?>
<div class="modal-overlay" id="<?= e($id) ?>" style="display:none;">
    <div class="modal modal-<?= e($size) ?>">
        <div class="modal-header">
            <h3 class="modal-title"><?= e($title) ?></h3>
            <button class="modal-close" onclick="closeModal('<?= e($id) ?>')">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
            </button>
        </div>
        <div class="modal-body">
            <?= $__template->yield('modal_body_' . $id, '') ?>
        </div>
        <div class="modal-footer">
            <?= $__template->yield('modal_footer_' . $id, '') ?>
        </div>
    </div>
</div>
