import { X } from 'lucide-react'
import { Button } from '@/components/ui/button'

interface ChatInfoPanelProps {
  isOpen: boolean
  onClose: () => void
}

export function ChatInfoPanel({ isOpen, onClose }: ChatInfoPanelProps) {
  if (!isOpen) return null

  return (
    <aside className="w-72 bg-card/90 border-l border-border/60 p-4 space-y-4 animate-in slide-in-from-right duration-200">
      <div className="flex items-center justify-between pb-3 border-b border-border/60">
        <span className="font-semibold text-xs uppercase tracking-wider text-muted-foreground">
          Thông tin hệ thống
        </span>
        <Button
          variant="ghost"
          size="icon"
          className="h-7 w-7 rounded-full text-muted-foreground"
          onClick={onClose}
        >
          <X className="w-4 h-4" />
        </Button>
      </div>

      <div className="space-y-3 text-xs text-muted-foreground">
        <div className="p-3 rounded-2xl bg-secondary/50 border border-border/60 space-y-1">
          <div className="font-semibold text-foreground">MCP Tools Connected</div>
          <p className="text-[11px]">Truy vấn thông tin chiến dịch, khách hàng & điểm thưởng theo thời gian thực.</p>
        </div>

        <div className="p-3 rounded-2xl bg-secondary/50 border border-border/60 space-y-1">
          <div className="font-semibold text-foreground">STOMP Streaming</div>
          <p className="text-[11px]">Hỗ trợ phản hồi thời gian thực qua WebSocket stream.</p>
        </div>
      </div>
    </aside>
  )
}
