'use client'

import React, { 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-current">
              {label}
            </label>
            {showValue && (
              <span className="text-sm text-current/70 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('clay-slider', className)}
          {...props}
        />
      </div>
    )
  )
)

Slider.displayName = 'Slider'