<script setup lang="ts">
import {
  Card,
  CardContent,
  CardHeader,
  CardTitle,
} from '@easyflow-core/shadcn-ui';

interface Props {
  title: string;
}

defineOptions({
  name: 'AnalysisChartCard',
});

withDefaults(defineProps<Props>(), {});
</script>

<template>
  <Card>
    <CardHeader class="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
      <CardTitle class="text-xl">{{ title }}</CardTitle>
      <div
        v-if="$slots.extra"
        class="flex w-full flex-wrap items-center justify-end gap-2 sm:w-auto"
      >
        <slot name="extra"></slot>
      </div>
    </CardHeader>
    <CardContent>
      <slot></slot>
    </CardContent>
  </Card>
</template>
