Copy

<script setup lang="ts">
import { IconLink, IconLinkOff } from "@tabler/icons-vue";

const props = defineProps<{
  syncWithChart?: boolean;
}>();

const emit = defineEmits<{
  (e: "update:syncWithChart", value: boolean): void;
}>();
</script>

<template>
  <button
    type="button"
    @click="emit('update:syncWithChart', !syncWithChart)"
    class="flex items-center gap-1 rounded border p-0.5 text-[10px] font-medium transition-colors"
    :class="[
      syncWithChart
        ? 'border-secondary-500/50 bg-secondary-500/10 text-secondary-400 hover:bg-secondary-500/20'
        : 'border-stone-600 bg-stone-800 text-stone-400 hover:bg-stone-700',
    ]"
    :title="syncWithChart ? 'Synced with chart' : 'Click to sync with chart'"
  >
    <component :is="syncWithChart ? IconLink : IconLinkOff" size="14" />
  </button>
</template>