{{-- 
Button Group Component
Usage:
<x-ui.button-group>
    <x-ui.buttons.view>View</x-ui.buttons.view>
    <x-ui.buttons.edit>Edit</x-ui.buttons.edit>
    <x-ui.buttons.danger>Delete</x-ui.buttons.danger>
</x-ui.button-group>
--}}
@props(['align' => 'start'])

@php
    $alignClasses = match($align) {
        'start' => 'justify-start',
        'center' => 'justify-center',
        'end' => 'justify-end',
        'between' => 'justify-between',
        'around' => 'justify-around',
        'evenly' => 'justify-evenly',
        default => 'justify-start',
    };
    
    $classes = 'flex items-center gap-2 ' . $alignClasses;
    
    // Responsive classes for mobile
    $classes .= ' sm:flex-row sm:gap-2 flex-col gap-1';
@endphp

<div {{ $attributes->merge(['class' => $classes]) }}>
    {{ $slot }}
</div>