import { useChannels } from '@/store/channels';
import { useAccount } from '@/store/account';
import { channelPath, navigate } from '@/app/navigation';
import { Button } from '@/ui/Button';
import { Icon } from '@/ui/Icon';
import styles from './ThreadSidebar.module.css';

export function ChannelSwitcher({ id, onCreate }: { id?: string; onCreate: () => void }) {
  const channels = useChannels((s) => s.list);
  const username = useAccount((s) => s.username);
  return <section className={styles.panel} aria-label="我的空间导航">
    <div className={styles.heading}><strong>空间</strong><Button variant="ghost" icon="edit" label="新建空间" disabled={!username} onClick={onCreate} /></div>
    <nav className={styles.channels} aria-label="空间列表">{channels.map((channel) => <button key={channel.id} type="button"
      className={`${styles.thread} ${channel.id === id ? styles.selected : ''}`} aria-current={channel.id === id ? 'page' : undefined}
      onClick={() => navigate(channelPath(channel.id))}><Icon name={channel.mode === 'enc' ? 'lock' : 'file'} size={14} /><span>{channel.name || channel.id.slice(0, 8)}</span></button>)}</nav>
  </section>;
}