import type { ReactNode } from 'react';
import { AppLanguageDropdown } from '#/components/AppLanguageDropdown';
import { signinDialogHandle } from '#/components/dialogs/handles';
import { Text } from '#/components/Text';
import { Button, ButtonText } from '#/components/web/Button';
import { Link } from '#/components/web/Link';
import Logo from '#/icons/brands/Bluesky.svg';
import { m } from '#/paraglide/messages';
import * as styles from './NavSignInCard.css';
/** Card shown in the left navigation sidebar and drawer when the user is signed out. */
export function NavSignInCard(): ReactNode {
return (
<div className={styles.root}>
<Link label="Bluesky - Home" to={{ name: 'Home' }}>
<Logo className={styles.logo} />
</Link>
<div className={styles.titleWrap}>
<Text leading="none" size="_3xl" weight="bold">
{m['view.auth.signIn.prompt']()}
</Text>
</div>
<div className={styles.buttonRow}>
<Button
color="primary"
label={m['common.session.action.signIn']()}
onClick={() => signinDialogHandle.openWithPayload({})}
size="small"
variant="solid"
>
<ButtonText>{m['common.session.action.signIn']()}</ButtonText>
</Button>
</div>
<div className={styles.languageWrap}>
<AppLanguageDropdown />
</div>
</div>
);
}