'use client'
import { useAuth } from '@/contexts/AuthContext'
import { Button } from '@/components/ui/button'
import { Edit3 } from 'lucide-react'
import Link from 'next/link'

interface TopicEditButtonProps {
  topicId: string
  authorId: string
  className?: string
}

export function TopicEditButton({ topicId, authorId, className }: TopicEditButtonProps) {
  const { user } = useAuth()
  
  // Only show edit button if user is authenticated and is the author
  if (!user || user.id !== authorId) {
    return null
  }

  return (
    <Button
      asChild
      variant="outline"
      size="sm"
      className={className}
    >
      <Link href={`/topics/edit/${topicId}`} className="flex items-center gap-2">
        <Edit3 className="w-4 h-4" />
        Edit Post
      </Link>
    </Button>
  )
}