"use client"

import { Button } from '@/components/ui/button'
import { MessageCircle, Store, Users } from 'lucide-react'
import { useRouter } from 'next/navigation'

export function MessengerEmptyState() {
  const router = useRouter()

  const handleGoToMarket = () => {
    router.push('/market')
  }

  return (
    <div className="flex items-center justify-center h-full">
      <div className="text-center max-w-md">
        <div className="w-20 h-20 bg-white/10 rounded-full flex items-center justify-center mx-auto mb-6">
          <MessageCircle className="h-10 w-10 text-white/40" />
        </div>
        
        <h3 className="text-xl font-semibold text-white mb-3">
          У вас пока нет контрагентов
        </h3>
        
        <p className="text-white/60 text-sm mb-6 leading-relaxed">
          Чтобы начать общение, сначала найдите и добавьте контрагентов в разделе «Маркет». 
          После добавления они появятся здесь для общения.
        </p>
        
        <div className="space-y-3">
          <Button
            onClick={handleGoToMarket}
            className="bg-blue-500/20 hover:bg-blue-500/30 text-blue-300 border-blue-500/30 w-full cursor-pointer"
            variant="outline"
          >
            <Store className="h-4 w-4 mr-2" />
            Перейти в Маркет
          </Button>
          
          <div className="flex items-center justify-center text-white/40 text-xs">
            <Users className="h-3 w-3 mr-1" />
            Найдите партнеров и начните общение
          </div>
        </div>
      </div>
    </div>
  )
} 