import { useWorkspace } from '@/store/workspace';
import { Button } from '@/ui/Button';
import { DevicePanel } from './DevicePanel';
import styles from './SideRail.module.css';

interface Props {
  open: boolean;
  qrOpen: boolean;
  onToggle: () => void;
}

/** 电脑右侧的设备与分享:低频,默认收成窄栏,需要时展开 */
export function SideRail({ open, qrOpen, onToggle }: Props) {
  const channel = useWorkspace((s) => s.channel);

  if (open) {
    return (
      <aside className={styles.open}>
        <div className={styles.head}>
          <span className={styles.heading}>设备与分享</span>
          <Button variant="ghost" icon="chevronRight" label="收起" onClick={onToggle} />
        </div>
        <DevicePanel qrOpen={qrOpen} />
      </aside>
    );
  }

  return (
    <aside className={styles.rail}>
      <Button variant="ghost" icon="chevronLeft" label="展开设备与分享" onClick={onToggle} />
      <span className={styles.count} title="已加入席位 / 总席位">
        {channel?.seatsUsed ?? '—'}/{channel?.seats ?? '—'}
        <span className={styles.countLabel}>席位</span>
      </span>
      <Button variant="ghost" icon="share" label="分享" onClick={onToggle} />
    </aside>
  );
}