import Link from 'next/link'
import { Brain, ArrowLeft, Play, Pause, CheckCircle, XCircle } from 'lucide-react'
import type { AgentDetail } from './types'

interface AgentHeaderProps {
  agent: AgentDetail
}

export function AgentHeader({ agent }: AgentHeaderProps) {
  return (
    <div className="flex items-center justify-between mb-6">
      <div className="flex items-center gap-4">
        <Link
          href="/ai/agents"
          className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
        >
          <ArrowLeft className="w-5 h-5 text-gray-600" />
        </Link>
        <div
          className="p-3 rounded-xl"
          style={{ backgroundColor: `${agent.color}20` }}
        >
          <Brain className="w-6 h-6" style={{ color: agent.color }} />
        </div>
        <div>
          <h1 className="text-2xl font-bold text-gray-900">{agent.name}</h1>
          <p className="text-gray-500">{agent.description}</p>
        </div>
      </div>

      <div className="flex items-center gap-3">
        <div className={`flex items-center gap-2 px-3 py-1.5 rounded-full text-sm font-medium ${
          agent.status === 'running' ? 'bg-green-100 text-green-700' :
          agent.status === 'paused' ? 'bg-yellow-100 text-yellow-700' :
          'bg-red-100 text-red-700'
        }`}>
          {agent.status === 'running' ? <CheckCircle className="w-4 h-4" /> :
           agent.status === 'paused' ? <Pause className="w-4 h-4" /> :
           <XCircle className="w-4 h-4" />}
          {agent.status}
        </div>
        <button className="flex items-center gap-2 px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors">
          {agent.status === 'running' ? (
            <>
              <Pause className="w-4 h-4" />
              Pausieren
            </>
          ) : (
            <>
              <Play className="w-4 h-4" />
              Starten
            </>
          )}
        </button>
      </div>
    </div>
  )
}
