{{--
  Lernschiff Brand Component
  Location: resources/views/components/layout/brand.blade.php

  Usage:
    <x-layout.brand />
    <x-layout.brand tag="Lehrer · Goethe-GS" />
    <x-layout.brand variant="wordmark" />
    <x-layout.brand variant="icon-only" />
--}}

@props([
    'tag' => 'Schüler · v1.0',
    'variant' => 'default',
    'href' => null,
])

@php
    $element = $href !== null ? 'a' : 'div';
    $linkAttrs = $href !== null ? ['href' => $href] : [];
@endphp

<{{ $element }}
    {{ $attributes->merge($linkAttrs)->merge(['class' => 'flex items-center gap-2.5']) }}
    aria-label="Lernschiff Home"
>
    @if($variant === 'wordmark')
        <img
            src="{{ asset('logo/lernschiff-wordmark.svg') }}"
            alt="Lernschiff"
            class="h-8 w-auto"
        >
    @elseif($variant === 'icon-only')
        <img
            src="{{ asset('logo/lernschiff-icon.svg') }}"
            alt="Lernschiff"
            class="w-8 h-8"
        >
    @else
        <img
            src="{{ asset('logo/lernschiff-icon.svg') }}"
            alt=""
            class="w-8 h-8 shrink-0"
            aria-hidden="true"
        >
        <span class="flex flex-col leading-tight">
            <span class="font-display font-bold text-sm tracking-tight text-ink-1">
                Lernschiff
            </span>
            <span class="text-[10px] uppercase tracking-wider text-ink-3 mt-0.5">
                {{ $tag }}
            </span>
        </span>
    @endif
</{{ $element }}>