<script setup lang="ts">
import { PanelRightClose, PanelRightOpen } from 'lucide-vue-next'
import { Button } from '@/components/ui/button'

defineProps<{ enabled: boolean }>()
defineEmits<{ toggle: [] }>()
</script>

<template>
  <Button
    @click="$emit('toggle')"
    :variant="enabled ? 'default' : 'outline'"
    size="icon-sm"
    :class="enabled ? 'bg-primary text-primary-foreground hover:bg-primary/90' : ''"
    :title="enabled ? 'Disable Auto Detail Panel' : 'Enable Auto Detail Panel'"
  >
    <PanelRightClose v-if="enabled" class="h-4 w-4" />
    <PanelRightOpen v-else class="h-4 w-4" />
  </Button>
</template>
