"use client"

import * as React from "react"
import { ClockIcon } from "lucide-react"
import { cn } from "@/src/lib/utils"

interface TimePickerProps {
  value?: string
  onChange?: (value: string) => void
  onBlur?: () => void
  disabled?: boolean
  className?: string
}

const TimePicker = React.forwardRef<HTMLInputElement, TimePickerProps>(
  ({ value, onChange, onBlur, disabled, className }, ref) => {
    return (
      <div className={cn("relative flex items-center", className)}>
        <input
          ref={ref}
          type="time"
          step="60"
          value={value ?? ""}
          onChange={(e) => onChange?.(e.target.value)}
          onBlur={onBlur}
          disabled={disabled}
          className="flex h-9 w-full rounded-lg border border-input bg-background px-3 py-1 pr-9 text-sm shadow-xs transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
        />
        <ClockIcon className="pointer-events-none absolute right-3 size-4 text-muted-foreground" />
      </div>
    )
  }
)

TimePicker.displayName = "TimePicker"

export { TimePicker }