Comparador de Imágenes Antes y Después

/* eslint-disable @next/next/no-img-element */
"use client";
import { useState } from "react";

export const BeforeAfterImageCompare = () => {
  const [sliderPosition, setSliderPosition] = useState<number>(50);
  const [isDragging, setIsDragging] = useState<boolean>(false);

  const handleMove = (
    event: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>
  ) => {
    if (!isDragging) return;

    const rect = event.currentTarget.getBoundingClientRect();
    const clientX = event.type.includes("touch")
      ? (event as React.TouchEvent<HTMLDivElement>).touches[0].clientX
      : (event as React.MouseEvent<HTMLDivElement>).clientX;
    const x = Math.max(0, Math.min(clientX - rect.left, rect.width));
    const percent = Math.max(0, Math.min((x / rect.width) * 100, 100));

    setSliderPosition(percent);
  };

  const handleStart = (
    event: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>
  ) => {
    setIsDragging(true);
    event.preventDefault(); // Prevent scrolling on touch devices
  };

  const handleEnd = () => {
    setIsDragging(false);
  };

  return (
    <div
      className="w-full relative "
      onTouchEnd={handleEnd}
      onMouseUp={handleEnd}
    >
      <div
        // aspect-[70/45]
        className="relative  w-full  md:max-w-[600px]  m-auto overflow-hidden select-none"
        onTouchMove={handleMove}
        onMouseMove={handleMove}
        onTouchStart={handleStart}
        onMouseDown={handleStart}
      >
        <img
          alt="Image after"
          loading="lazy"
          decoding="async"
          className=" object-cover h-full rounded-lg"
          src="https://creamz.wpengine.com/wp-content/uploads/2023/09/home-two-one-after-image-3.jpg"
        />

        <div
          // aspect-[70/45]
          className="absolute  top-0 left-0 right-0 w-full md:max-w-[600px]  m-auto overflow-hidden select-none"
          style={{ clipPath: `inset(0 ${100 - sliderPosition}% 0 0)` }}
        >
          <img
            loading="lazy"
            decoding="async"
            className=" object-cover h-full rounded-lg"
            alt="Image Before"
            src="https://creamz.wpengine.com/wp-content/uploads/2023/09/home-two-one-before-image-4.jpg"
          />
        </div>

        <div
          className="absolute top-0 bottom-0 w-1 bg-white dark:bg-black cursor-ew-resize"
          style={{
            left: `calc(${sliderPosition}% - 1px)`,
          }}
        >
          <div className="bg-white dark:bg-black absolute rounded-full h-3 w-3 -left-1 top-[calc(50%-5px)]" />
        </div>
      </div>
    </div>
  );
};