Card Ticket code

@props([
    'eyebrow' => null,
    'title',
    'code' => null,
    'stubLabel' => 'Admit one',
    'details' => [],
])

@php
    /*
    | Boarding-pass card: a perforated tear line with real punched notches
    | (masked out of the card edge) separates the body from a short stub.
    | Good for event passes, licence keys, invites and one-time codes.
    |
    | details: array of ['label' => 'Seat', 'value' => '14C']
    |
    | Usage:
    |   <x-ui.card-ticket
    |       eyebrow="Laracon AU"
    |       title="Sydney · Main hall"
    |       code="HBR-2481"
    |       :details="[['label' => 'Seat', 'value' => '14C']]"
    |   />
    */
@endphp

<div {{ $attributes->merge(['class' => 'ticket-notches flex min-w-0 flex-col rounded-xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-gray-900']) }}>
    <div class="flex-1 p-5">
        @if ($eyebrow)
            <p class="text-[10px] font-bold uppercase tracking-[0.18em] text-brand-600 dark:text-brand-400">{{ $eyebrow }}</p>
        @endif

        <h3 class="mt-1.5 text-base font-semibold tracking-tight text-gray-900 dark:text-white">{{ $title }}</h3>

        @if ($slot->isNotEmpty())
            <div class="mt-1.5 text-sm leading-relaxed text-gray-600 dark:text-gray-400">{{ $slot }}</div>
        @endif

        @if (count($details) > 0)
            <dl class="mt-4 flex flex-wrap gap-x-8 gap-y-3">
                @foreach ($details as $detail)
                    <div class="min-w-0">
                        <dt class="text-[10px] font-semibold uppercase tracking-wider text-gray-400 dark:text-gray-500">{{ $detail['label'] }}</dt>
                        <dd class="mt-0.5 font-mono text-sm font-semibold tabular-nums text-gray-900 dark:text-white">{{ $detail['value'] }}</dd>
                    </div>
                @endforeach
            </dl>
        @endif
    </div>

    {{-- Perforation + stub; height must match --ticket-notch-y in app.css --}}
    <div class="flex h-13 shrink-0 items-center justify-between gap-3 border-t border-dashed border-gray-300 px-5 dark:border-gray-700">
        <span class="inline-flex items-center gap-1.5 text-[10px] font-bold uppercase tracking-[0.18em] text-gray-400 dark:text-gray-500">
            <x-ui.icon name="barcode" weight="regular" size="lg" />
            {{ $stubLabel }}
        </span>
        @if ($code)
            <span class="font-mono text-xs font-semibold tracking-widest text-gray-700 dark:text-gray-300">{{ $code }}</span>
        @endif
    </div>
</div>