'use client';

import { TimeDisplay } from '../Meta/TimeDisplay';
import { LoopButton } from './LoopButton';
import { PlayButton } from './PlayButton';
import { SkipButton } from './SkipButton';
import { VolumeControl } from './VolumeControl';

type Props = {
  onPrev?: () => void;
  onNext?: () => void;
  showTime?: boolean;
};

export function ControlsRow({ onPrev, onNext, showTime = false }: Props) {
  return (
    <div className="flex items-center justify-between gap-3">
      <div className="flex items-center gap-1">
        <SkipButton direction="prev" onClick={onPrev} />
        <PlayButton />
        <SkipButton direction="next" onClick={onNext} />
      </div>
      <div className="flex items-center gap-2">
        {showTime && <TimeDisplay />}
        <VolumeControl />
        <LoopButton />
      </div>
    </div>
  );
}