import NumberFlow from '@number-flow/react'
import { formatDuration } from '@/utils/format-duration'

interface NumberFlowDurationProps {
  duration: number
  variant?: 'clock' | 'wordy'
  className?: string
}

export function NumberFlowDuration({ 
  duration, 
  variant = 'clock', 
  className 
}: NumberFlowDurationProps) {
  const formatted = formatDuration(duration)
  
  // Split the formatted duration to get individual parts
  const parts = formatted.split(':')
  
  if (variant === 'clock') {
    // For clock variant
    if (parts.length === 2) {
      // Format: MM:SS
      const [minutes, seconds] = parts
      return (
        <span className={className}>
          <NumberFlow
            value={parseInt(minutes)}
            digits={{ 1: { max: 5 } }}
            format={{ minimumIntegerDigits: 2 }}
          />
          <NumberFlow
            value={parseInt(seconds)}
            prefix=":"
            digits={{ 1: { max: 5 } }}
            format={{ minimumIntegerDigits: 2 }}
          />
        </span>
      )
    } else {
      // Format: HH:MM:SS
      const [hours, minutes, seconds] = parts
      return (
        <span className={className}>
          <NumberFlow
            value={parseInt(hours)}
            format={{ minimumIntegerDigits: 2 }}
          />
          <NumberFlow
            value={parseInt(minutes)}
            prefix=":"
            digits={{ 1: { max: 5 } }}
            format={{ minimumIntegerDigits: 2 }}
          />
          <NumberFlow
            value={parseInt(seconds)}
            prefix=":"
            digits={{ 1: { max: 5 } }}
            format={{ minimumIntegerDigits: 2 }}
          />
        </span>
      )
    }
  }
  
  // For wordy variant
  if (parts.length === 2) {
    // Format: MM:SS
    const [minutes, seconds] = parts
    return (
      <span className={className}>
        <NumberFlow value={parseInt(minutes)} />m{' '}
        <NumberFlow value={parseInt(seconds)} />s
      </span>
    )
  } else {
    // Format: HH:MM:SS
    const [hours, minutes, seconds] = parts
    return (
      <span className={className}>
        <NumberFlow value={parseInt(hours)} />h{' '}
        <NumberFlow value={parseInt(minutes)} />m{' '}
        <NumberFlow value={parseInt(seconds)} />s
      </span>
    )
  }
}