import { LuInbox } from 'react-icons/lu';

const InstagramEmptyDialogs = () => (
  <div className="flex flex-col items-center justify-center py-28 px-8 bg-[var(--tg-bg-secondary)] text-center">
    <div className="w-20 h-20 rounded-full bg-[var(--tg-bg)] flex items-center justify-center mb-5 shadow-inner border border-[var(--tg-divider)]">
      <LuInbox size={36} strokeWidth={1.25} className="text-[var(--tg-text-secondary)]" />
    </div>
    <div className="text-[17px] font-bold text-[var(--tg-text-primary)] tracking-tight">
      Нет активных диалогов
    </div>
    <p className="text-[14px] text-[var(--tg-text-secondary)] mt-2 max-w-[260px] leading-relaxed">
      Когда появятся новые сообщения, они отобразятся здесь
    </p>
  </div>
);

export default InstagramEmptyDialogs;
