<script setup lang="ts">
import { cn } from "@/lib/utils";
import type { HTMLAttributes } from "vue";
import AppChartToolbar from "./AppChartToolbar.vue";

const props = defineProps<{
  name: string;
  class?: HTMLAttributes["class"];
}>();
</script>

<template>
  <div
    :class="
      cn(
        'group relative flex flex-col overflow-hidden rounded-xl border transition-all duration-200 ease-in-out hover:z-30',
        props.class
      )
    "
  >
    <AppChartToolbar
      :name
      class="bg-card text-card-foreground relative z-20 flex justify-end border-b px-3 py-2.5"
    >
      <slot />
    </AppChartToolbar>
    <div
      class="relative z-10 [&>div]:rounded-none [&>div]:border-none [&>div]:shadow-none"
    >
      <slot />
    </div>
  </div>
</template>

<style></style>
