Feature code

@props([
    'icon' => 'sparkle',
    'iconWeight' => 'duotone',
    'title',
    'layout' => 'stacked',
])

@php
    /*
    | Feature highlight with an icon, title and description (slot).
    |
    | layout: stacked (icon on top), inline (icon beside text)
    |
    | Usage:
    |   <x-ui.feature icon="lightning" title="Fast">Built for speed.</x-ui.feature>
    */
@endphp

@if ($layout === 'inline')
    <div {{ $attributes->merge(['class' => 'flex items-start gap-4']) }}>
        <span class="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-brand-50 dark:bg-brand-950/60 text-brand-600 dark:text-brand-400">
            <x-ui.icon :name="$icon" :weight="$iconWeight" size="xl" />
        </span>
        <div>
            <h3 class="text-base font-semibold text-gray-900 dark:text-white">{{ $title }}</h3>
            <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">{{ $slot }}</p>
        </div>
    </div>
@else
    <div {{ $attributes->merge(['class' => '']) }}>
        <span class="flex h-12 w-12 items-center justify-center rounded-xl bg-brand-50 dark:bg-brand-950/60 text-brand-600 dark:text-brand-400">
            <x-ui.icon :name="$icon" :weight="$iconWeight" size="2xl" />
        </span>
        <h3 class="mt-4 text-base font-semibold text-gray-900 dark:text-white">{{ $title }}</h3>
        <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">{{ $slot }}</p>
    </div>
@endif