"use client"

import React from "react"
import { cn } from "@/lib/utils"

interface MinMaxInputProps {
    label: string
    name: string
    unit?: string
    minValue: string
    maxValue: string
    onMinChange: (value: string) => void
    onMaxChange: (value: string) => void
    step?: string
    className?: string
}

export function MinMaxInput({
    label,
    name,
    unit,
    minValue,
    maxValue,
    onMinChange,
    onMaxChange,
    step = "1",
    className
}: MinMaxInputProps) {
    return (
        <div className={cn("space-y-2", className)}>
            <label className="text-sm font-medium text-slate-300 flex items-center gap-2">
                {label}
                {unit && <span className="text-xs text-slate-500 font-normal">({unit})</span>}
            </label>
            <div className="flex items-center gap-2">
                <div className="relative flex-1">
                    <input
                        type="number"
                        step={step}
                        value={minValue}
                        onChange={(e) => onMinChange(e.target.value)}
                        placeholder="Min"
                        className="w-full h-10 rounded-lg border border-slate-700 bg-slate-800/50 px-3 py-2 text-sm text-slate-100 placeholder:text-slate-500 focus:outline-none focus:ring-2 focus:ring-cyan-500/50 focus:border-cyan-500 transition-all duration-200"
                    />
                    <span className="absolute right-3 top-1/2 -translate-y-1/2 text-xs text-slate-500">
                        min
                    </span>
                </div>
                <div className="text-slate-600">—</div>
                <div className="relative flex-1">
                    <input
                        type="number"
                        step={step}
                        value={maxValue}
                        onChange={(e) => onMaxChange(e.target.value)}
                        placeholder="Max"
                        className="w-full h-10 rounded-lg border border-slate-700 bg-slate-800/50 px-3 py-2 text-sm text-slate-100 placeholder:text-slate-500 focus:outline-none focus:ring-2 focus:ring-cyan-500/50 focus:border-cyan-500 transition-all duration-200"
                    />
                    <span className="absolute right-3 top-1/2 -translate-y-1/2 text-xs text-slate-500">
                        max
                    </span>
                </div>
            </div>
        </div>
    )
}