"use client"

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

export function AuthorInput({ value, onChange }: AuthorInputProps) {
  return (
    <div className="flex flex-col gap-1.5">
      <label
        htmlFor="article-author"
        className="text-xs font-bold text-foreground font-sans uppercase tracking-wider"
      >
        Author
      </label>
      <input
        id="article-author"
        type="text"
        value={value}
        onChange={(e) => onChange(e.target.value)}
        placeholder="e.g. Dr. John Smith"
        required
        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>
  )
}