@props([
    'subjectName',
    'chapterName' => null,
    'topicName' => null,
])

@php
    $metaChipBase = 'material-reader-meta-chip flex min-h-9 w-full items-center justify-center gap-1 rounded-lg border-2 px-2 py-1.5 text-xs sm:text-sm font-semibold leading-snug shadow-sm text-center';
    $metaChipLabel = 'shrink-0 uppercase text-slate-600';
    $metaChipSep = 'shrink-0 text-slate-400';
    $metaChipValue = 'min-w-0 break-words leading-snug';
    $chapterDisplay = $chapterName ?: '—';
    $topicDisplay = $topicName ?: '—';
@endphp

<div class="material-reader-meta-row border-b-2 border-brand-green-200 bg-gradient-to-r from-brand-green-50 via-white to-amber-50 px-2 py-2.5 sm:px-4 sm:py-3" style="display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0.5rem;width:100%;">
    <div class="{{ $metaChipBase }} border-brand-green bg-white" title="{{ $subjectName }}">
        <span class="{{ $metaChipLabel }}">Subject</span>
        <span class="{{ $metaChipSep }}">:</span>
        <span class="{{ $metaChipValue }} text-brand-green">{{ $subjectName }}</span>
    </div>
    <div class="{{ $metaChipBase }} border-slate-300 bg-slate-50" title="{{ $chapterDisplay }}">
        <span class="{{ $metaChipLabel }}">Chapter</span>
        <span class="{{ $metaChipSep }}">:</span>
        <span class="{{ $metaChipValue }} text-slate-800">{{ $chapterDisplay }}</span>
    </div>
    <div class="{{ $metaChipBase }} border-amber-400 bg-amber-50" title="{{ $topicDisplay }}">
        <span class="{{ $metaChipLabel }} text-amber-800">Topic</span>
        <span class="{{ $metaChipSep }} text-amber-500">:</span>
        <span class="{{ $metaChipValue }} text-amber-900">{{ $topicDisplay }}</span>
    </div>
</div>
