{{--
    Chart Card Widget
    A card container for charts (Chart.js, ApexCharts, etc.)
    Props:
      $title      – card title
      $subtitle   – optional subtitle
      $height     – chart container height class (default: 'h-64')
      $chartId    – unique canvas/div ID for the chart library

    Usage:
      <x-widgets.chart-card title="Revenue" chartId="revenue-chart" height="h-72">
          <x-slot:actions>
              <x-forms.select name="period" :options="['7d'=>'7 Days','30d'=>'30 Days']" />
          </x-slot:actions>
      </x-widgets.chart-card>
      <script>
          // initialize your chart on #revenue-chart
      </script>
--}}
@props([
    'title'   => '',
    'subtitle'=> '',
    'height'  => 'h-64',
    'chartId' => 'chart',
])

<div class="rounded-xl border border-border bg-card text-card-foreground shadow-card">
    <div class="flex items-center justify-between gap-4 border-b border-border px-6 py-4">
        <div>
            <h3 class="text-base font-semibold text-foreground">{{ $title }}</h3>
            @if($subtitle)
                <p class="mt-0.5 text-xs text-muted-foreground">{{ $subtitle }}</p>
            @endif
        </div>
        @if(isset($actions))
            <div class="flex items-center gap-2">{{ $actions }}</div>
        @endif
    </div>
    <div class="p-6">
        <div id="{{ $chartId }}" class="{{ $height }} w-full">
            {{ $slot }}
        </div>
    </div>
</div>