import React from 'react'

export default function BeforeAfterSlider({ beforeUrl, afterUrl, beforeAlt = 'Original image', afterAlt = 'Enhanced image' }) {
  const [position, setPosition] = React.useState(50)

  if (!beforeUrl || !afterUrl) {
    return null
  }

  return (
    <div className="rounded-[28px] border border-white/10 bg-[#08111d] p-5 shadow-[0_18px_48px_rgba(2,6,23,0.2)]">
      <div className="flex items-center justify-between gap-3">
        <div>
          <p className="text-[11px] font-semibold uppercase tracking-[0.22em] text-slate-400">Before / after</p>
          <h3 className="mt-2 text-xl font-semibold tracking-[-0.03em] text-white">Compare the original with the enhanced result</h3>
        </div>
        <span className="rounded-full border border-white/10 bg-white/[0.05] px-3 py-1 text-xs font-semibold uppercase tracking-[0.16em] text-slate-200">{position}%</span>
      </div>

      <div className="relative mt-5 overflow-hidden rounded-[24px] border border-white/10 bg-black/40">
        <img src={beforeUrl} alt={beforeAlt} className="block w-full object-cover" />
        <div className="pointer-events-none absolute inset-y-0 left-0 overflow-hidden border-r border-white/80" style={{ width: `${position}%` }}>
          <img src={afterUrl} alt={afterAlt} className="block h-full w-full object-cover" />
        </div>

        <div className="pointer-events-none absolute inset-y-0 left-0" style={{ left: `calc(${position}% - 1px)` }}>
          <div className="flex h-full items-center">
            <div className="flex h-10 w-10 -translate-x-1/2 items-center justify-center rounded-full border border-white/80 bg-black/60 text-white shadow-[0_0_30px_rgba(15,23,42,0.5)]">
              <i className="fa-solid fa-left-right text-xs" />
            </div>
          </div>
        </div>

        <div className="pointer-events-none absolute left-3 top-3 rounded-full border border-white/10 bg-[#08111dd8] px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-100">Original</div>
        <div className="pointer-events-none absolute right-3 top-3 rounded-full border border-emerald-300/20 bg-emerald-400/12 px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.16em] text-emerald-100">Enhanced</div>
      </div>

      <label className="mt-5 block">
        <span className="sr-only">Adjust before and after comparison slider</span>
        <input
          type="range"
          min="0"
          max="100"
          step="1"
          value={position}
          onChange={(event) => setPosition(Number(event.target.value || 50))}
          className="h-2 w-full cursor-pointer appearance-none rounded-full bg-white/10 accent-sky-300"
          aria-label="Adjust before and after comparison slider"
        />
      </label>
    </div>
  )
}