<template>
  <div
    ref="container"
    class="relative w-[90vw] h-[90vh] overflow-hidden bg-black select-none mx-auto"
  >
    <!-- Image A: visible to the LEFT of the handle -->
    <img
      :src="imgA"
      alt=""
      class="absolute inset-0 w-full h-full object-cover pointer-events-none"
      :style="{ clipPath: leftClip }"
      draggable="false"
      @dragstart.prevent
    />

    <!-- Image B: visible to the RIGHT of the handle -->
    <img
      :src="imgB"
      alt=""
      class="absolute inset-0 w-full h-full object-cover pointer-events-none"
      :style="{ clipPath: rightClip }"
      draggable="false"
      @dragstart.prevent
    />

    <!-- Divider / handle -->
    <div
      ref="handle"
      class="absolute top-0 h-full w-1 bg-white/90 shadow z-20 cursor-ew-resize"
      :style="dragStyle"
      role="slider"
      aria-label="Comparison slider"
      tabindex="0"
      :aria-valuemin="0"
      :aria-valuemax="Math.round(containerWidth)"
      :aria-valuenow="Math.round(x)"
    >
      <div
        class="absolute top-1/2 -translate-y-1/2 -left-2.5 w-6 h-6 rounded-full bg-white shadow border"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, computed, watch } from 'vue'
import { useDraggable, useElementSize } from '@vueuse/core'

const props = defineProps({
  imgA: {
    type: String,
    default:
      '/images/placeholder1.jpg'
  },
  imgB: {
    type: String,
    default:
      '/images/placeholder2.jpg'
  }
})

const container = ref(null)
const handle = ref(null)

const { width: containerWidth } = useElementSize(container)
const { x, style: dragStyle } = useDraggable(handle, { container, axis: 'x' })

// Start centered when size known
watch(containerWidth, w => {
  if (w) x.value = w / 2
})

// Complementary masks based on the handle's X
const leftClip = computed(() => {
  const w = containerWidth.value || 0
  const clamped = Math.max(0, Math.min(x.value, w))
  // Show left side up to X: inset(top, right, bottom, left)
  // Right inset hides everything to the right of the handle
  const rightInset = Math.max(0, w - clamped)
  return `inset(0 ${Math.round(rightInset)}px 0 0)`
})

const rightClip = computed(() => {
  const w = containerWidth.value || 0
  const clamped = Math.max(0, Math.min(x.value, w))
  // Show right side from X onward by hiding left part
  return `inset(0 0 0 ${Math.round(clamped)}px)`
})

const imgA = computed(() => props.imgA)
const imgB = computed(() => props.imgB)
</script>

<style>
/* Tailwind handles layout; no extra CSS required. */
</style>