'use client';

import { UserPlus } from 'lucide-react';
import { useTranslations } from 'next-intl';

interface OnboardingProps {
  onStartChatting: () => void;
}

export function ChatOnboarding({ onStartChatting }: OnboardingProps) {
  const tLayout = useTranslations('chat.layout');
  const tInvite = useTranslations('chat.invite');
  return (
    <div className="flex-1 flex items-center justify-center p-6 bg-gradient-to-br from-teal-50 to-blue-50 dark:from-gray-900 dark:to-gray-800">
      <div className="max-w-md w-full text-center">
        <div className="inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-teal-50 dark:bg-teal-900/20 text-teal-600 dark:text-teal-300 mb-4">
          <UserPlus className="w-8 h-8" />
        </div>
        <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">
          {tLayout('emptyTitle')}
        </h2>
        <p className="text-gray-600 dark:text-gray-300 mb-6">
          {tLayout('emptySubtitle')}
        </p>
        <button
          onClick={onStartChatting}
          className="inline-flex items-center gap-2 px-5 py-3 rounded-xl bg-teal-500 text-white hover:bg-teal-600 transition-colors"
        >
          <UserPlus className="w-5 h-5" /> {tInvite('inviteButton')}
        </button>
      </div>
    </div>
  );
}