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

const EmptyState: React.FC = () => {
  const t = useTranslations('chat.emptyState');

  return (
    <div className="flex-1 flex items-center justify-center bg-gray-50 dark:bg-gray-900">
      <div className="text-center">
        <div className="w-16 h-16 lg:w-20 lg:h-20 bg-teal-100 dark:bg-teal-900/30 rounded-full flex items-center justify-center mx-auto mb-4">
          <MessageCircle className="w-8 h-8 lg:w-10 lg:h-10 text-teal-500" />
        </div>
        <h3 className="text-lg lg:text-xl font-semibold text-gray-900 dark:text-white mb-2">
          {t('title')}
        </h3>
        <p className="text-gray-500 dark:text-gray-400 text-sm lg:text-base">
          {t('subtitle')}
        </p>
      </div>
    </div>
  );
};

export default EmptyState;