{{--
    User Page Container
    Wraps a user page with optional breadcrumb and page header.
    Similar to admin page-container but uses user-specific routes and breadcrumbs.

    Props:
      $title       – page heading
      $subtitle    – optional subtitle
      $breadcrumbs – array for breadcrumb component
      $actions     – named slot for header action buttons

    Usage:
      <x-layouts.user.page-container title="My Profile" :breadcrumbs="[...]">
          <x-slot:actions>
              <x-buttons.primary>Action</x-buttons.primary>
          </x-slot:actions>

          ... page content ...
      </x-layouts.user.page-container>
--}}
@props([
    'title'       => '',
    'subtitle'    => '',
    'breadcrumbs' => [],
])

<div class="flex flex-col min-h-0 flex-1 animate-fade-in">

    {{-- Breadcrumb --}}
    @if(count($breadcrumbs))
        <div class="px-6 pt-4">
            <x-layouts.user.breadcrumb :items="$breadcrumbs" />
        </div>
    @endif

    {{-- Page Header --}}
    @if($title)
    <div class="page-header px-6 pt-4">
        <div>
            <h1 class="page-title">{{ $title }}</h1>
            @if($subtitle)
                <p class="page-subtitle">{{ $subtitle }}</p>
            @endif
        </div>
        @if(isset($actions))
            <div class="flex items-center gap-3 flex-shrink-0">
                {{ $actions }}
            </div>
        @endif
    </div>
    @endif

    {{-- Content --}}
    <div class="flex-1 px-6 pb-6">
        {{ $slot }}
    </div>
</div>