"use client"

interface SubTitleInputProps {
  value: string
  onChange: (value: string) => void
}

export function SubTitleInput({ value, onChange }: SubTitleInputProps) {
  return (
    <div className="flex flex-col gap-1.5">
      <label
        htmlFor="article-subtitle"
        className="text-xs font-bold text-foreground font-sans uppercase tracking-wider"
      >
        Sub Title
      </label>
      <input
        id="article-subtitle"
        type="text"
        value={value}
        onChange={(e) => onChange(e.target.value)}
        placeholder="Enter article sub title..."
        className="w-full bg-card border border-border rounded-xl px-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"
      />
    </div>
  )
}