// Adapted from Kibo UI (MIT), with owned React/CSS APIs. See THIRD_PARTY_NOTICES.md.
"use client";
import { useState, type ComponentProps, type ReactNode } from "react";
export type ComparisonProps = Omit<
  ComponentProps<"div">,
  "onChange" | "defaultValue"
> & {
  before: ReactNode;
  after: ReactNode;
  label?: string;
  value?: number;
  defaultValue?: number;
  onValueChange?: (value: number) => void;
  disabled?: boolean;
};
export function Comparison({
  before,
  after,
  label = "Comparison position",
  value,
  defaultValue = 50,
  onValueChange,
  disabled,
  className = "",
  ...props
}: ComparisonProps) {
  const [internal, setInternal] = useState(defaultValue);
  const current = Math.max(
    0,
    Math.min(
      100,
      Number.isFinite(value ?? internal) ? (value ?? internal) : 50,
    ),
  );
  return (
    <div className={`ynr-comparison ${className}`} {...props}>
      <div className="ynr-comparison-images">
        <div>{after}</div>
        <div
          className="ynr-comparison-before"
          style={{ clipPath: `inset(0 ${100 - current}% 0 0)` }}
        >
          {before}
        </div>
        <span
          className="ynr-comparison-line"
          style={{ left: `${current}%` }}
          aria-hidden="true"
        />
      </div>
      <input
        type="range"
        min={0}
        max={100}
        aria-label={label}
        value={current}
        disabled={disabled}
        onChange={(event) => {
          const next = Number(event.target.value);
          if (value === undefined) setInternal(next);
          onValueChange?.(next);
        }}
      />
    </div>
  );
}