'use client';

import { useMemo } from 'react';
import { cn } from '@/lib/utils';

interface TimeDisplayProps {
  bar: number;
  beat: number;
  durationBars: number;
  bpm: number;
  className?: string;
}

export function TimeDisplay({
  bar,
  beat,
  durationBars,
  bpm,
  className,
}: TimeDisplayProps) {
  const { currentTime, totalTime } = useMemo(() => {
    const secondsPerBeat = 60 / bpm;
    const secondsPerBar = secondsPerBeat * 4;

    const currentSeconds = bar * secondsPerBar + beat * secondsPerBeat;
    const totalSeconds = durationBars * secondsPerBar;

    const formatTime = (seconds: number) => {
      const mins = Math.floor(seconds / 60);
      const secs = Math.floor(seconds % 60);
      return `${mins}:${secs.toString().padStart(2, '0')}`;
    };

    return {
      currentTime: formatTime(currentSeconds),
      totalTime: formatTime(totalSeconds),
    };
  }, [bar, beat, durationBars, bpm]);

  return (
    <div className={cn('flex items-center gap-3 font-mono text-sm', className)}>
      <div className="flex items-center gap-1">
        <span className="text-muted-foreground">Bar</span>
        <span className="text-foreground font-medium w-6 text-right">{bar + 1}</span>
        <span className="text-muted-foreground/50">|</span>
        <span className="text-muted-foreground">Beat</span>
        <span className="text-foreground font-medium w-4">{beat + 1}</span>
      </div>
      <div className="text-muted-foreground/50">|</div>
      <div className="text-muted-foreground">
        {currentTime} / {totalTime}
      </div>
    </div>
  );
}