"use client"

import Link from "next/link"
import { useLocale } from "@/lib/i18n/context"
import { VoteButton } from "./vote-button"
import { Button } from "@/components/ui/button"
import { formatRelativeTime, type Comment } from "@/lib/mock-data"
import { Reply } from "lucide-react"

export function CommentItem({
  comment,
  replies = [],
  depth = 0,
}: {
  comment: Comment
  replies?: Comment[]
  depth?: number
}) {
  const { locale, t } = useLocale()
  const maxDepth = 3

  return (
    <div className={depth > 0 ? "ml-6 border-l-2 border-border pl-4" : ""}>
      <div className="flex gap-3 py-3">
        {/* Vote */}
        <VoteButton initialCount={comment.vote_count} />

        {/* Content */}
        <div className="flex min-w-0 flex-1 flex-col gap-2">
          <div className="flex items-center gap-2 text-xs text-muted-foreground">
            <Link
              href={`/profile/${comment.author.username}`}
              className="font-medium text-foreground/80 hover:text-primary transition-colors"
            >
              {comment.author.display_name}
            </Link>
            <span>{formatRelativeTime(comment.created_at, locale)}</span>
          </div>
          <p className="text-sm leading-relaxed text-foreground">{comment.content}</p>
          <div>
            <Button variant="ghost" size="sm" className="h-7 gap-1 text-xs text-muted-foreground">
              <Reply className="h-3.5 w-3.5" />
              {t.thread.reply}
            </Button>
          </div>
        </div>
      </div>

      {/* Nested Replies */}
      {depth < maxDepth && replies.length > 0 && (
        <div className="flex flex-col">
          {replies.map((reply) => (
            <CommentItem key={reply.id} comment={reply} depth={depth + 1} />
          ))}
        </div>
      )}
    </div>
  )
}