import React from 'react'
import { IoMdAdd } from 'react-icons/io'
import { IoTimeOutline, IoDocumentTextOutline } from 'react-icons/io5'

interface ChatHeaderProps {
  currentChatTitle?: string
  bookId?: string
  userId?: string
  chatError?: string
  onNewChat: () => void
  onOpenHistory: () => void
}

export default function ChatHeader({
  currentChatTitle,
  bookId,
  userId,
  chatError,
  onNewChat,
  onOpenHistory
}: ChatHeaderProps) {
  const getTitle = () => {
    if (currentChatTitle) return currentChatTitle
    if (bookId && userId) return 'Select a chat or start a new one'
    return 'Bookwiz Chat'
  }

  return (
    <div className="h-12 bg-slate-800/50 border-b border-slate-700/50 flex items-center justify-between px-3">
      <div className="flex items-center gap-1.5">
        <h1 className="text-sm font-semibold text-slate-200">
          {getTitle()}
        </h1>
        {bookId && (
          <div className="text-[10px] text-slate-300 bg-gradient-to-r from-teal-500/20 to-cyan-500/20 px-1.5 py-0.5 rounded-md flex items-center gap-1 border border-teal-500/20">
            <IoDocumentTextOutline className="w-2.5 h-2.5" />
            Agent
          </div>
        )}
        {chatError && (
          <div className="text-[10px] text-red-300 bg-red-900/20 px-1.5 py-0.5 rounded-md border border-red-700/20">
            {chatError}
          </div>
        )}
      </div>
      <div className="flex items-center gap-1">
        <button 
          className="p-1 text-slate-400 hover:text-slate-200 hover:bg-slate-700/50 rounded-lg transition-all duration-200"
          onClick={onNewChat}
          disabled={!bookId || !userId}
          title="New chat"
        >
          <IoMdAdd className="w-3.5 h-3.5" />
        </button>
        <button 
          className="p-1 text-slate-400 hover:text-slate-200 hover:bg-slate-700/50 rounded-lg transition-all duration-200"
          onClick={onOpenHistory}
          disabled={!bookId || !userId}
          title="Chat history"
        >
          <IoTimeOutline className="w-3.5 h-3.5" />
        </button>
      </div>
    </div>
  )
}