/**
 * PersonalNotesRow — pinned sidebar row for the local user's private
 * Personal Notes room. Rendered at the top of DMLayout above the
 * friends DMs.
 *
 * Purely presentational: the row pulls its channel from ChannelStore
 * (whose contents come from RoomManager.getRoomAsChannel, which
 * classifies the room as `type='personal_notes'`), then renders a
 * brand-primary rounded square with a NotePencil icon on the left
 * and "Personal Notes" on the right.
 */
import { observer } from 'mobx-react-lite';
import { NotePencil } from '@phosphor-icons/react';
import type { Channel } from '@brycord/matrix-client';
import styles from './PersonalNotesRow.module.css';

interface PersonalNotesRowProps {
	channel: Channel;
	selected: boolean;
	onClick: () => void;
}

export const PersonalNotesRow = observer(function PersonalNotesRow({
	channel,
	selected,
	onClick,
}: PersonalNotesRowProps) {
	return (
		<button
			type="button"
			className={`${styles.item} ${selected ? styles.itemSelected : ''}`}
			onClick={onClick}
		>
			<div className={styles.icon}>
				<NotePencil size={22} weight="fill" />
			</div>
			<span className={styles.label}>{channel.name || 'Personal Notes'}</span>
		</button>
	);
});
