@props([
    'title',
    'icon' => 'info',
    'tone' => null,
    'href' => null,
    'hint' => null,
    'action' => null,
])

{{--
    A card that answers one question and opens the screen where that question
    lives. The whole card is the link — not a small arrow in a corner — because
    a target the size of a card is one nobody misses.
--}}

@php $tag = $href ? 'a' : 'div'; @endphp

<{{ $tag }} @if ($href) href="{{ $href }}" @endif {{ $attributes->merge(['class' => 'bigcard']) }}>
    <div class="bigcard__top">
        <span class="bigcard__icon {{ $tone ? 'bigcard__icon--'.$tone : '' }}">
            <x-icon :name="$icon" />
        </span>
        <span class="bigcard__title">{{ $title }}</span>
    </div>

    <div class="bigcard__body">
        {{ $slot }}
        @if ($hint)
            <p class="bigcard__hint">{{ $hint }}</p>
        @endif
    </div>

    @if ($href)
        <div class="bigcard__foot">
            <span class="bigcard__go">
                {{ $action ?? __('common.open') }}<x-icon name="arrow-right" />
            </span>
        </div>
    @endif
</{{ $tag }}>