"use client";

import { useState } from "react";

/**
 * Before/after comparison. Drag the vertical divider (or use arrow keys on the
 * slider) to reveal the edited photo over the original.
 */
export function BeforeAfter({ before, after, alt }: { before: string; after: string; alt: string }) {
  const [pos, setPos] = useState(50);
  return (
    <div className="ba" style={{ "--ba-pos": `${pos}%` } as React.CSSProperties}>
      {/* eslint-disable-next-line @next/next/no-img-element */}
      <img className="ba-img" src={after} alt={`${alt}, after editing`} draggable={false} />
      <div className="ba-before" aria-hidden="true">
        {/* eslint-disable-next-line @next/next/no-img-element */}
        <img className="ba-img" src={before} alt="" draggable={false} />
      </div>
      <span className="ba-tag ba-tag-before">Before</span>
      <span className="ba-tag ba-tag-after">After</span>
      <div className="ba-line" aria-hidden="true"><span className="ba-handle">‹ ›</span></div>
      <input
        className="ba-range"
        type="range"
        min={0}
        max={100}
        step={0.5}
        value={pos}
        onChange={(e) => setPos(Number(e.target.value))}
        aria-label="Drag to compare before and after editing"
      />
    </div>
  );
}