import type { StaticVarSegment } from '../types/protocol'
import { Sliders } from 'lucide-react'

interface SessionBarProps {
  variables: StaticVarSegment[]
}

/**
 * 对话区顶部的会话变量横栏 —— 会话级别的配置变量，独立于任何消息。
 * 这些变量在对话开始时被注入到 System Prompt 模板中。
 */
export default function SessionBar({ variables }: SessionBarProps) {
  if (variables.length === 0) return null

  return (
    <div className="shrink-0 border-b border-gray-200 bg-gradient-to-r from-blue-50/60 to-white px-4 py-2">
      <div className="flex items-center gap-2 flex-wrap">
        {/* 标题 */}
        <span className="inline-flex items-center gap-1 text-[10px] font-semibold text-blue-400 uppercase tracking-wider mr-1">
          <Sliders size={12} />
          会话变量
        </span>

        {/* 变量列表 */}
        {variables.map((v, i) => (
          <span
            key={i}
            className="inline-flex items-center gap-1 px-2 py-0.5 rounded-md bg-white border border-blue-200 text-[11px] font-mono shadow-sm"
            title={v.description}
          >
            <span className="text-blue-400">{'{{'}{v.name}{'}}'}</span>
            <span className="text-gray-300">→</span>
            <span className="text-blue-700 font-medium">{v.value}</span>
          </span>
        ))}
      </div>
    </div>
  )
}