@props([
    'size' => 'md',
])

@php
    $btnSize = $size === 'sm' ? 'dc-btn--sm' : '';
@endphp

<div class="btn-group" role="group" aria-label="{{ __('Theme') }}">
    <button type="button"
            class="dc-btn dc-btn--ghost dc-btn--icon {{ $btnSize }}"
            data-action="set-theme"
            data-value="light"
            aria-label="{{ __('Use light theme') }}"
            title="{{ __('Light') }}">
        <x-icon name="sun" size="18" />
    </button>
    <button type="button"
            class="dc-btn dc-btn--ghost dc-btn--icon {{ $btnSize }}"
            data-action="set-theme"
            data-value="system"
            aria-label="{{ __('Match system theme') }}"
            title="{{ __('System') }}">
        <x-icon name="monitor" size="18" />
    </button>
    <button type="button"
            class="dc-btn dc-btn--ghost dc-btn--icon {{ $btnSize }}"
            data-action="set-theme"
            data-value="dark"
            aria-label="{{ __('Use dark theme') }}"
            title="{{ __('Dark') }}">
        <x-icon name="moon" size="18" />
    </button>
</div>