import{j as e}from"./jsx-runtime.D_zvdyIk.js";import{r}from"./index.C5BVv2q5.js";const N=({beforeImg:o,afterImg:s,labelBefore:d="Before",labelAfter:u="After"})=>{const[f,g]=r.useState(50),[n,p]=r.useState({before:!1,after:!1}),[h,x]=r.useState(null),m=r.useRef(null),l=r.useRef(!1);r.useEffect(()=>{if(console.log("ImpactSlider received props:",{beforeImg:o,afterImg:s}),console.log("Type of beforeImg:",typeof o),console.log("Type of afterImg:",typeof s),o){const t=new Image;t.onload=()=>console.log("Before image test - LOADED:",o),t.onerror=()=>console.error("Before image test - FAILED:",o),t.src=o}if(s){const t=new Image;t.onload=()=>console.log("After image test - LOADED:",s),t.onerror=()=>console.error("After image test - FAILED:",s),t.src=s}},[o,s]),r.useEffect(()=>{console.log("ImpactSlider mounted with images:",{beforeImg:o,afterImg:s})},[o,s]);const w=()=>{l.current=!0},a=()=>{l.current=!1},v=t=>{if(!l.current&&t.type==="mousemove")return;const i=m.current?.getBoundingClientRect();if(!i)return;let c;"touches"in t?c=t.touches[0].clientX:c=t.clientX;const b=(c-i.left)/i.width*100;g(Math.max(0,Math.min(100,b)))};return h?e.jsx("div",{className:"relative w-full aspect-[16/10] overflow-hidden rounded-3xl bg-red-50 flex items-center justify-center",children:e.jsxs("p",{className:"text-red-600 text-center p-4",children:["Error: ",h]})}):e.jsxs("div",{ref:m,className:"relative w-full aspect-[16/10] overflow-hidden rounded-3xl cursor-col-resize select-none border-4 border-white shadow-2xl",onMouseDown:w,onMouseUp:a,onMouseMove:v,onMouseLeave:a,onTouchStart:w,onTouchEnd:a,onTouchMove:v,children:[e.jsx("img",{src:s,alt:u,className:`absolute inset-0 w-full h-full object-cover transition-opacity duration-500 ${n.after?"opacity-100":"opacity-0"}`,onLoad:()=>p(t=>({...t,after:!0})),onError:()=>x(`Failed to load after image: ${s}`),draggable:!1}),e.jsx("div",{className:"absolute inset-0 w-full h-full",style:{clipPath:`inset(0 ${100-f}% 0 0)`},children:e.jsx("img",{src:o,alt:d,className:`absolute inset-0 w-full h-full object-cover transition-opacity duration-500 ${n.before?"opacity-100":"opacity-0"}`,onLoad:()=>p(t=>({...t,before:!0})),onError:()=>x(`Failed to load before image: ${o}`),draggable:!1})}),(!n.before||!n.after)&&e.jsx("div",{className:"absolute inset-0 flex items-center justify-center bg-slate-100 z-20",children:e.jsxs("div",{className:"text-center",children:[e.jsx("div",{className:"animate-spin rounded-full h-12 w-12 border-b-2 border-secondary mx-auto"}),e.jsx("p",{className:"mt-4 text-slate-600",children:"Loading images..."})]})}),n.before&&n.after&&e.jsxs(e.Fragment,{children:[e.jsx("div",{className:"absolute inset-y-0 w-1 bg-white shadow-xl pointer-events-none",style:{left:`${f}%`},children:e.jsx("div",{className:"absolute top-1/2 -left-4 -translate-y-1/2 w-8 h-8 bg-secondary rounded-full flex items-center justify-center text-white shadow-lg",children:e.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",className:"w-5 h-5",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",children:e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:3,d:"M8 9l-4 3 4 3m8-6l4 3-4 3"})})})}),e.jsx("div",{className:"absolute top-4 left-4 bg-black/50 text-white px-3 py-1 rounded text-xs uppercase font-bold backdrop-blur-sm pointer-events-none",children:d}),e.jsx("div",{className:"absolute top-4 right-4 bg-secondary/80 text-white px-3 py-1 rounded text-xs uppercase font-bold backdrop-blur-sm pointer-events-none",children:u})]})]})};export{N as default};
