<script lang="ts" setup>
import { Button } from "@/Components/ui/button";
import { Separator } from "@/Components/ui/separator";
import TooltipProvider from "@/Components/ui/tooltip/TooltipProvider.vue";
import { cn } from "@/lib/utils";
import {
  AreaChartIcon,
  BarChartBigIcon,
  HexagonIcon,
  LineChartIcon,
  MousePointer2Icon,
  PieChartIcon,
  RadarIcon,
} from "lucide-vue-next";
import type { HTMLAttributes } from "vue";

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

<template>
  <div :class="cn('flex items-center gap-2', props.class)">
    <div
      class="text-muted-foreground flex items-center gap-1.5 pl-1 text-[13px] [&>svg]:h-[0.9rem] [&>svg]:w-[0.9rem]"
    >
      <template v-if="name.includes('ChartLine')">
        <LineChartIcon /> Line Chart
      </template>
      <template v-else-if="name.includes('ChartBar')">
        <BarChartBigIcon /> Bar Chart
      </template>
      <template v-else-if="name.includes('ChartPie')">
        <PieChartIcon /> Pie Chart
      </template>
      <template v-else-if="name.includes('ChartArea')">
        <AreaChartIcon /> Area Chart
      </template>
      <template v-else-if="name.includes('ChartRadar')">
        <HexagonIcon /> Radar Chart
      </template>
      <template v-else-if="name.includes('ChartRadial')">
        <RadarIcon /> Radial Chart
      </template>
      <template v-else-if="name.includes('ChartTooltip')">
        <MousePointer2Icon /> Tooltip
      </template>
    </div>
    <div class="ml-auto flex items-center gap-2 [&>form]:flex">
      <Separator orientation="vertical" class="mx-0 hidden h-4! md:flex" />
    </div>
  </div>
</template>

<style></style>
