"use client"

import { Clock } from "lucide-react"

interface ReadingTimeInputProps {
  value: number | ""
  onChange: (value: number | "") => void
  disabled?: boolean
}

export function ReadingTimeInput({ value, onChange, disabled = false }: ReadingTimeInputProps) {
  return (
    <div className="flex flex-col gap-1.5">
      <label
        htmlFor="article-reading-time"
        className="text-xs font-bold text-foreground font-sans uppercase tracking-wider"
      >
        Reading Time{" "}
        <span className="text-muted-foreground normal-case font-normal tracking-normal">(minutes)</span>
      </label>
      <div className="relative">
        <input
          id="article-reading-time"
          type="number"
          min={1}
          value={value}
          onChange={(e) => onChange(e.target.value === "" ? "" : Number(e.target.value))}
          placeholder="e.g. 5"
          disabled={disabled}
          className="w-full bg-card border border-border rounded-xl pl-10 pr-4 py-2.5 text-sm text-foreground font-sans placeholder:text-muted-foreground outline-none focus:ring-2 focus:ring-[#2BB673]/30 focus:border-[#2BB673] transition-colors disabled:opacity-60"
        />
        <Clock
          className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground pointer-events-none"
          aria-hidden="true"
        />
      </div>
    </div>
  )
}