<template>
  <div class="text-xs" @click="resetHandler()">
    <Tooltip :delay-duration="500">
      <TooltipTrigger as-child>
        <div class="w-6 h-6 rounded-md bg-accent flex items-center justify-center cursor-pointer">
          <X :size="12" />
        </div>
      </TooltipTrigger>
      <TooltipContent>Reset filter</TooltipContent>
    </Tooltip>
  </div>
</template>

<script setup lang="ts">
import { X } from 'lucide-vue-next'
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'

defineProps({
  resetHandler: {
    type: Function,
    required: true
  }
})
</script>
