import { ArrowLeft, ArrowRight } from 'lucide-react'

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

export function TestSessionFooter({
  currentPartIndex, totalParts, currentPartName, onPrev, onNext,
}: Props) {
  const isFirst = currentPartIndex === 0
  const isLast = currentPartIndex === totalParts - 1

  return (
    <footer
      className="grid items-center flex-shrink-0"
      style={{
        gridTemplateColumns: '1fr auto 1fr',
        padding: '12px 24px',
        gap: 16,
        background: 'var(--at-surface)',
        borderTop: '1px solid var(--at-line)',
      }}
    >
      <button
        onClick={onPrev}
        disabled={isFirst}
        className="inline-flex items-center gap-1.5 transition-colors disabled:cursor-not-allowed"
        style={{
          justifySelf: 'start',
          padding: '8px 14px',
          borderRadius: 8,
          background: 'var(--at-surface)',
          border: '1px solid var(--at-line)',
          color: 'var(--at-ink-2)',
          fontSize: 13,
          fontWeight: 500,
          opacity: isFirst ? 0.4 : 1,
        }}
      >
        <ArrowLeft size={14} />
        Part trước
      </button>

      <div
        className="flex items-center gap-2"
        style={{
          fontFamily: 'var(--at-serif)',
          fontStyle: 'italic',
          fontSize: 13,
          color: 'var(--at-ink-2)',
        }}
      >
        <span
          style={{
            background: 'var(--at-paper-2)',
            padding: '4px 10px',
            borderRadius: 6,
            fontWeight: 600,
            fontStyle: 'normal',
            fontFamily: 'var(--at-sans)',
            color: 'var(--at-ink)',
          }}
        >
          Part {currentPartIndex + 1} / {totalParts}
        </span>
        <span style={{ color: 'var(--at-mute)' }}>— {currentPartName}</span>
      </div>

      <button
        onClick={onNext}
        disabled={isLast}
        className="inline-flex items-center gap-1.5 transition-[filter] hover:brightness-110 disabled:cursor-not-allowed"
        style={{
          justifySelf: 'end',
          padding: '8px 14px',
          borderRadius: 8,
          background: 'var(--at-brand)',
          border: '1px solid var(--at-brand)',
          color: 'white',
          fontSize: 13,
          fontWeight: 500,
          opacity: isLast ? 0.4 : 1,
        }}
      >
        Part tiếp theo
        <ArrowRight size={14} />
      </button>
    </footer>
  )
}
