@props([
    'title',
    'canvasId' => null,
    'compact' => false,
])

@php
    $id = $canvasId ?? $attributes->get('id', 'chart-' . uniqid());
@endphp

<div {{ $attributes->except('id')->merge(['class' => $compact ? 'tw-card p-3' : 'tw-card p-4']) }}>
    <h3 class="{{ $compact ? 'mb-2 text-xs' : 'mb-3 text-sm' }} font-semibold text-[var(--color-text)]">{{ $title }}</h3>
    <div class="tw-chart-frame relative w-full {{ $compact ? 'tw-chart-frame--compact' : '' }}">
        <canvas id="{{ $id }}" class="h-full w-full"></canvas>
    </div>
    {{ $slot }}
</div>