import { useTranslation } from 'react-i18next';

import { InviteJoin } from '@/components/friends/InviteJoin';
import { Button, Card } from '@/components/ui/primitives';
import { useUiStore } from '@/stores/ui';

/**
 * Экран пустого списка серверов. Главного сервера больше нет: новый
 * пользователь видит пустую рейку, может создать свой сервер или
 * присоединиться по приглашению. Иконки серверов появятся в рейке сразу
 * после вступления.
 */
export default function NoGuildView() {
  const { t } = useTranslation();
  const openGuildCreate = useUiStore((state) => state.openGuildCreate);

  return (
    <section id="app-content" className="absolute inset-0 overflow-y-auto p-6">
      <div className="flex min-h-full items-center justify-center">
        <Card className="w-full max-w-lg">
          <h2 className="text-lg font-semibold">{t('guilds.empty.title')}</h2>
          <p className="mt-2 text-sm text-fg-muted">{t('guilds.empty.body')}</p>

          <Button className="mt-4" onClick={openGuildCreate}>
            {t('guilds.add')}
          </Button>

          <InviteJoin className="mt-6 border-t border-border/60 pt-4" />
        </Card>
      </div>
    </section>
  );
}