"use client";

import { useRef, useState } from "react";

export function BeforeAfter() {
  const [value, setValue] = useState(50);
  const ref = useRef<HTMLDivElement>(null);

  const update = (clientX: number) => {
    if (!ref.current) return;
    const rect = ref.current.getBoundingClientRect();
    const next = ((clientX - rect.left) / rect.width) * 100;
    setValue(Math.max(5, Math.min(95, next)));
  };

  return (
    <div
      ref={ref}
      className="before-after"
      onPointerMove={(e) => e.buttons === 1 && update(e.clientX)}
      onPointerDown={(e) => {
        (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
        update(e.clientX);
      }}
      data-cursor="DRAG"
    >
      <div className="before-after__layer before-after__raw">
        <div className="comparison-art comparison-art--raw">
          <span>RAW FOOTAGE</span>
          <strong>FLAT</strong>
        </div>
      </div>
      <div className="before-after__layer before-after__final" style={{ width: `${value}%` }}>
        <div className="comparison-art comparison-art--final">
          <span>FINAL EDIT</span>
          <strong>FINISHED</strong>
        </div>
      </div>
      <div className="before-after__handle" style={{ left: `${value}%` }}>
        <span>↔</span>
      </div>
      <div className="before-after__labels">
        <span>RAW →</span>
        <span>← FINAL</span>
      </div>
    </div>
  );
}