<template>
  <div class="flex items-center space-x-2">
    <Checkbox
      :checked="showThumbnails"
      @update:checked="$emit('update:showThumbnails', $event)"
      id="thumbnail-toggle"
    />
    <Label for="thumbnail-toggle" class="text-sm font-medium">
      Show Thumbnails
    </Label>
  </div>
</template>

<script setup lang="ts">
import { Checkbox } from "@/components/ui/checkbox";
import { Label } from "@/components/ui/label";

interface Props {
  showThumbnails: boolean;
}

interface Emits {
  (e: "update:showThumbnails", value: boolean): void;
}

defineProps<Props>();
defineEmits<Emits>();
</script>