"use client";

import { useState } from "react";

interface Props { label: string; currentValue: number; min: number; max: number; step: number; unit: string; compute: (value: number) => number; resultLabel: string; resultUnit: string }

export default function ImpactSlider({ label, currentValue, min, max, step, unit, compute, resultLabel, resultUnit }: Props) {
  const [value, setValue] = useState(currentValue);
  const result = compute(value);
  const delta = result - compute(currentValue);
  const improved = delta > 0;

  return (
    <div className="bg-white rounded-xl border border-slate-200 px-5 py-4">
      <div className="flex items-center justify-between mb-2">
        <span className="text-xs font-semibold text-slate-700">{label}</span>
        <span className="text-sm font-bold text-slate-900 tabular-nums">{value}{unit}</span>
      </div>
      <input type="range" min={min} max={max} step={step} value={value} onChange={(e) => setValue(Number(e.target.value))} className="w-full h-1.5 bg-slate-200 rounded-full appearance-none cursor-pointer accent-brand-600" />
      <div className="flex items-center justify-between mt-3 pt-2 border-t border-slate-100">
        <span className="text-xs text-slate-500">{resultLabel}</span>
        <div className="flex items-center gap-2">
          <span className="text-sm font-bold text-slate-900 tabular-nums">{result.toLocaleString()}{resultUnit}</span>
          {delta !== 0 && <span className={`text-xs font-bold ${improved ? "text-green-600" : "text-red-500"}`}>{improved ? "+" : ""}{delta.toLocaleString()}</span>}
        </div>
      </div>
    </div>
  );
}
