'use client'

import { forwardRef, InputHTMLAttributes } from 'react'
import { cn } from '@/utils/helpers'

export interface SliderProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
  label?: string
  min: number
  max: number
  step?: number
  value: number
  onValueChange: (value: number) => void
  showValue?: boolean
  valueFormat?: (value: number) => string
}

export const Slider = forwardRef<HTMLInputElement, SliderProps>(
  ({ className, label, min, max, step = 1, value, onValueChange, showValue = false, valueFormat, ...props }, ref) => {
    const sliderId = label?.toLowerCase().replace(/\s+/g, '-')

    return (
      <div className={cn('w-full', className)}>
        {label && (
          <div className="flex items-center justify-between mb-1">
            <label htmlFor={sliderId} className="text-sm font-medium text-gray-700 dark:text-gray-300">
              {label}
            </label>
            {showValue && (
              <span className="text-sm text-gray-500 dark:text-gray-400 font-mono">
                {valueFormat ? valueFormat(value) : value}
              </span>
            )}
          </div>
        )}
        <input
          ref={ref}
          id={sliderId}
          type="range"
          min={min}
          max={max}
          step={step}
          value={value}
          onChange={(e) => onValueChange(Number(e.target.value))}
          className={cn(
            'w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer',
            'accent-blue-600 dark:bg-gray-700',
            'focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2',
            'disabled:cursor-not-allowed disabled:opacity-50'
          )}
          {...props}
        />
      </div>
    )
  }
)

Slider.displayName = 'Slider'