@props([
    'title'       => '',
    'subtitle'    => '',
    'section'     => '',
    'wide'        => false,
    'fullWidth'   => false,
])

@php
    $resolvedSubtitle = $subtitle ?: __('pages/admin/components.demo.subtitle');
    $resolvedSection = $section ?: __('pages/admin/components.section.ui_elements');
    $containerClass = match (true) {
        $fullWidth => 'w-full space-y-6',
        $wide       => 'mx-auto max-w-7xl space-y-6',
        default     => 'mx-auto max-w-5xl space-y-6',
    };
@endphp

<x-layouts.admin.page-container
    :title="$title"
    :subtitle="$resolvedSubtitle"
    :breadcrumbs="[
        ['label' => __('pages/admin/components.section.components')],
        ['label' => $resolvedSection],
        ['label' => $title],
    ]"
>
    <div class="{{ $containerClass }}">
        {{ $slot }}
    </div>
</x-layouts.admin.page-container>