"use client"

import { useState } from "react"
import { useLocale } from "@/lib/i18n/context"
import { Button } from "@/components/ui/button"
import { Textarea } from "@/components/ui/textarea"
import { Send } from "lucide-react"

export function CommentForm({ threadId }: { threadId: string }) {
  const { t } = useLocale()
  const [content, setContent] = useState("")

  function handleSubmit(e: React.FormEvent) {
    e.preventDefault()
    // Mock: do nothing for now
    setContent("")
  }

  return (
    <form onSubmit={handleSubmit} className="flex flex-col gap-3">
      <Textarea
        value={content}
        onChange={(e) => setContent(e.target.value)}
        placeholder={t.thread.writeComment}
        rows={3}
        className="resize-none"
      />
      <div className="flex justify-end">
        <Button type="submit" size="sm" disabled={!content.trim()} className="gap-1.5">
          <Send className="h-4 w-4" />
          {t.thread.submitComment}
        </Button>
      </div>
    </form>
  )
}