interface Props {
  currentPartIndex: number
  totalParts: number
  currentPartName: string
  onPrev: () => void
  onNext: () => void
}

export function TestSessionFooter({ currentPartIndex, totalParts, currentPartName, onPrev, onNext }: Props) {
  return (
    <footer className="h-14 flex items-center justify-between px-5 bg-white border-t border-slate-200 flex-shrink-0 z-10">
      <button
        onClick={onPrev}
        disabled={currentPartIndex === 0}
        className="flex items-center gap-1.5 px-4 py-2 border border-slate-200 rounded-xl text-sm font-semibold text-slate-600 hover:bg-slate-50 disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
      >
        <span className="material-symbols-outlined" style={{ fontSize: 18 }}>arrow_back</span>
        Part trước
      </button>

      <span className="text-sm font-bold text-slate-700">
        Part {currentPartIndex + 1} / {totalParts}
        <span className="text-slate-400 font-normal ml-1.5">— {currentPartName}</span>
      </span>

      <button
        onClick={onNext}
        disabled={currentPartIndex === totalParts - 1}
        className="flex items-center gap-1.5 px-4 py-2 bg-blue-600 text-white rounded-xl text-sm font-semibold hover:bg-blue-700 disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
      >
        Part tiếp theo
        <span className="material-symbols-outlined" style={{ fontSize: 18 }}>arrow_forward</span>
      </button>
    </footer>
  )
}
