import { ArrowRight } from 'lucide-react'
import type { BranchResponse } from '@/types/branching'

interface BranchTransitionBarProps {
  fromBranch: BranchResponse | null
  toBranch: BranchResponse
}

export function BranchTransitionBar({ fromBranch, toBranch }: BranchTransitionBarProps) {
  return (
    <div className="bg-accent-dim border border-accent/20 rounded-md px-3 py-2 my-2 flex items-center gap-2 text-sm">
      <span className="text-muted">Switched to</span>
      <span className="text-accent-text font-medium">{toBranch.label}</span>
      {fromBranch && (
        <>
          <ArrowRight size={12} className="text-muted" />
          <span className="text-muted">from {fromBranch.label}</span>
        </>
      )}
    </div>
  )
}
