@props([
    'company' => 'Koperasi Permodalan Kelantan Berhad',
    'leftLogo' => null,
    'rightLogo' => null,
])

@php
    $leftLogo = $leftLogo ?? asset('img/svg/logo-kopkb.svg');
    $rightLogo = $rightLogo ?? asset('img/svg/logo-arrahn-new.svg');
@endphp

<style>
    .bsas-ecert-header {
        flex: 0 0 auto;
        padding-bottom: 8px;
        margin-bottom: 14px;
    }
    .bsas-ecert-header .brand-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
    }
    .bsas-ecert-header .logos {
        display: flex;
        align-items: center;
        gap: 12px;
    }
    .bsas-ecert-header .logos img {
        height: 78px;
        width: auto;
        object-fit: contain;
    }
    .bsas-ecert-header .logos.is-end {
        justify-content: flex-end;
    }
    .bsas-ecert-header .company-heading {
        text-align: center;
        margin: 14px 0 0;
    }
    .bsas-ecert-header .company-heading .name {
        margin: 0;
        font-size: 16px;
        font-weight: 700;
        letter-spacing: .06em;
        color: var(--accent, #0f4c5c);
        text-transform: uppercase;
    }
</style>

<header {{ $attributes->merge(['class' => 'bsas-ecert-header']) }}>
    <div class="brand-row">
        <div class="logos">
            <img src="{{ $leftLogo }}" alt="KPKB">
        </div>
        <div class="logos is-end">
            <img src="{{ $rightLogo }}" alt="Ar-Rahn">
        </div>
    </div>
    <div class="company-heading">
        <p class="name">{{ $company }}</p>
    </div>
</header>