{{--
    Screen mockup — renders a dark device frame with inner content
    Props:
      $label - window title bar label
      $type  - 'dashboard' | 'pos' | 'kds' | 'inventory'
--}}
@props(['label' => 'PhyloPOS', 'type' => 'dashboard'])

<div class="screen-frame">
    <div class="screen-frame-bar">
        <div class="screen-dot bg-red-400"></div>
        <div class="screen-dot bg-amber-400"></div>
        <div class="screen-dot bg-emerald-400"></div>
        <span class="ml-3 text-xs text-graphite-500 font-mono">{{ $label }}</span>
    </div>
    <div class="relative bg-graphite-950 min-h-[280px] overflow-hidden">
        @if($type === 'dashboard')
            @include('components.mockups.dashboard')
        @elseif($type === 'pos')
            @include('components.mockups.pos')
        @elseif($type === 'kds')
            @include('components.mockups.kds')
        @elseif($type === 'inventory')
            @include('components.mockups.inventory')
        @else
            @include('components.mockups.dashboard')
        @endif
    </div>
</div>