@props(['title' => '', 'chartId' => '', 'height' => 'h-64', 'filterOptions' => []])

<x-rp-card>
    <div class="flex items-center justify-between mb-4">
        <h3 class="text-sm font-semibold text-slate-900 dark:text-slate-100">{{ $title }}</h3>
        @if(count($filterOptions) > 0)
            <select class="text-xs border border-slate-200 dark:border-slate-600 rounded-lg px-2 py-1 bg-white dark:bg-slate-700 text-slate-600 dark:text-slate-400 focus:ring-2 focus:ring-primary-500">
                @foreach($filterOptions as $option)
                    <option>{{ $option }}</option>
                @endforeach
            </select>
        @endif
    </div>
    <div id="{{ $chartId }}" class="{{ $height }}"></div>
    {{ $slot }}
</x-rp-card>