import { Wifi, FolderOpen, Hash } from 'lucide-react'
import type { Session } from '../../types/protocol'

interface SessionInfoProps {
  session: Session | null
  connectionId: string | null
}

export function SessionInfo({ session, connectionId }: SessionInfoProps) {
  return (
    <div className="p-4">
      <div className="flex items-center gap-2 mb-3">
        <Wifi className="h-4 w-4 text-[var(--accent-cyan)]" />
        <span className="text-sm font-medium text-[var(--text-primary)]">WebSocket</span>
        <span className="text-xs px-1.5 py-0.5 rounded bg-emerald-500/20 text-emerald-400">
          在线
        </span>
      </div>

      <div className="rounded-xl border border-[var(--border-color)] bg-[var(--bg-tertiary)]/80 p-3">
        <div className="flex items-center gap-2 mb-2">
          <FolderOpen className="h-4 w-4 text-[var(--text-secondary)]" />
          <span className="text-xs text-[var(--text-muted)] uppercase tracking-wider">当前会话</span>
        </div>

        {session ? (
          <div className="space-y-1">
            <p className="text-sm font-medium text-[var(--text-primary)] truncate">
              {session.title}
            </p>
            <div className="flex items-center gap-1 text-xs text-[var(--text-muted)]">
              <Hash className="h-3 w-3" />
              <span className="font-mono">{session.id.slice(0, 8)}...</span>
            </div>
          </div>
        ) : (
          <p className="text-sm text-[var(--text-muted)]">连接中...</p>
        )}

        {connectionId && (
          <div className="mt-2 pt-2 border-t border-[var(--border-color)]">
            <p className="text-xs text-[var(--text-muted)] font-mono">
              conn: {connectionId.slice(0, 8)}...
            </p>
          </div>
        )}
      </div>
    </div>
  )
}
