import { Link } from 'react-router';
import { ArrowLeft, Archive, Trash2, Maximize2, Minimize2 } from 'lucide-react';

type SessionBarProps = {
  listPath: string;
  provider: 'claude' | 'opencode';
  sessionTitle: string | undefined;
  isConnected: boolean;
  isGenerating: boolean;
  fullscreen: boolean;
  onArchive: (() => void) | undefined;
  onDelete: () => void;
  onToggleFullscreen: () => void;
};

export const SessionBar = ({
  listPath,
  provider,
  sessionTitle,
  isConnected,
  isGenerating,
  fullscreen,
  onArchive,
  onDelete,
  onToggleFullscreen,
}: SessionBarProps) => (
  <div className="shrink-0 flex items-center px-4 py-2 border-b border-duck-dark/10 bg-white/60">
    <div className="flex items-center gap-1">
      <Link to={listPath} className="p-1 text-duck-dark/40 hover:text-duck-dark transition-colors">
        <ArrowLeft className="h-4 w-4" />
      </Link>
      {provider === 'claude' && onArchive && (
        <button
          onClick={onArchive}
          className="p-1 text-duck-dark/40 hover:text-duck-teal transition-colors cursor-pointer"
        >
          <Archive className="h-4 w-4" />
        </button>
      )}
      <button onClick={onDelete} className="p-1 text-duck-dark/40 hover:text-red-500 transition-colors cursor-pointer">
        <Trash2 className="h-4 w-4" />
      </button>
    </div>
    <div className="flex-1 min-w-0 text-center text-sm font-medium text-duck-dark/70 truncate px-3">
      {sessionTitle ?? 'New chat'}
    </div>
    <div className="flex items-center gap-2 text-xs text-duck-dark/50">
      {!isConnected ? (
        <span className="inline-block h-2 w-2 rounded-full bg-red-500" />
      ) : isGenerating ? (
        <span className="inline-block h-2 w-2 rounded-full bg-duck-orange animate-pulse" />
      ) : (
        <span className="inline-block h-2 w-2 rounded-full bg-green-500" />
      )}
      <span>{!isConnected ? 'Disconnected' : isGenerating ? 'Working...' : ''}</span>
      <button
        onClick={onToggleFullscreen}
        className="p-1 text-duck-dark/40 hover:text-duck-dark transition-colors cursor-pointer"
      >
        {fullscreen ? <Minimize2 className="h-4 w-4" /> : <Maximize2 className="h-4 w-4" />}
      </button>
    </div>
  </div>
);