{{--
    基本的なモーダルコンポーネント
    @props id モーダルID
    @props title モーダルのタイトル
    @props maxWidth 最大幅 (sm|md|lg|xl|2xl)
--}}
@props(['id', 'title' => '', 'maxWidth' => 'lg'])

<x-modal id="{{$id}}" maxWidth="{{$maxWidth}}">
    <!-- header -->
    @if($title)
    <header class="py-3 px-4 border-b">
        <h3 class="text-lg font-medium text-gray-900">{{$title}}</h3>
    </header>
    @endif
    
    <!-- main -->
    <main class="px-4 py-4">
        @if(isset($content))
            {{$content}}
        @else
            {{$slot}}
        @endif
    </main>
    
    <!-- footer -->
    <footer class="py-3 px-4 flex gap-3 items-center justify-end border-t">
        @if(isset($actions))
            {{$actions}}
        @else
            <x-button.modal-close data-micromodal-close/>
        @endif
    </footer>
</x-modal>