@props([
    /** The document's line items (already eager-loaded — this never queries). */
    'items' => null,
    /** 'row' for the desktop table cell, 'card' for the mobile list. */
    'variant' => 'row',
    /** Fallback wording when the document has no lines at all. */
    'empty' => null,
])

@php
    // A hint of what the document is actually for, so nobody has to open the
    // PDF to find out. The lines are already loaded by the list query; this
    // component only formats them.
    $lines = collect($items ?? []);

    $label = function ($item): string {
        $name = trim((string) ($item->name ?? '')) ?: __('Item');
        $count = (float) ($item->qty ?? 0);

        if ($count <= 0 || abs($count - 1.0) < 0.001) {
            return $name;
        }

        return rtrim(rtrim(number_format($count, 2, '.', ','), '0'), '.').'× '.$name;
    };

    $first = $lines->first();
    $rest = $lines->slice(1);

    // Native tooltip: the full list, one line each, so a hover reveals
    // everything without a popover that the table's own scroll would clip.
    $tooltip = $lines->map(fn ($item) => '• '.$label($item))->implode("\n");

    // Second line: the description when there is only one item (that is where
    // the detail lives on a one-line quote), otherwise the other item names.
    $detail = $rest->isEmpty()
        ? trim((string) ($first->description ?? ''))
        : $rest->map(fn ($item) => $label($item))->implode(' · ');
@endphp

@if ($lines->isEmpty())
    <span class="text-xs italic text-slate-300">{{ $empty ?? __('No items') }}</span>
@elseif ($variant === 'card')
    <p class="mt-1 flex min-w-0 items-start gap-1.5 text-xs" title="{{ $tooltip }}">
        <x-icon name="cube" class="mt-0.5 h-3 w-3 shrink-0 text-slate-300" />
        <span class="truncate text-slate-500">{{ $label($first) }}</span>
        @if ($rest->isNotEmpty())
            <span class="shrink-0 rounded-full bg-slate-100 px-1.5 py-0.5 text-[10px] font-medium leading-tight text-slate-500">+{{ $rest->count() }}</span>
        @endif
    </p>
@else
    <div class="flex min-w-0 max-w-[13rem] items-start gap-2 lg:max-w-[18rem]" title="{{ $tooltip }}">
        <x-icon name="cube" class="mt-1 h-3.5 w-3.5 shrink-0 text-slate-300" />
        <div class="min-w-0">
            <div class="flex min-w-0 items-center gap-1.5">
                <span class="truncate text-sm text-slate-700">{{ $label($first) }}</span>
                @if ($rest->isNotEmpty())
                    <span class="shrink-0 rounded-full bg-slate-100 px-1.5 py-0.5 text-[10px] font-medium leading-tight text-slate-500"
                          title="{{ trans_choice('{1}:count more item on this document|[2,*]:count more items on this document', $rest->count(), ['count' => $rest->count()]) }}">
                        +{{ $rest->count() }}
                    </span>
                @endif
            </div>
            @if ($detail !== '')
                <p class="truncate text-xs text-slate-400">{{ $detail }}</p>
            @endif
        </div>
    </div>
@endif