'use client';

import { PlayButton, VolumeControl } from '../Controls';
import { TimeDisplay } from '../Meta';
import { Waveform } from '../Waveform';
import type { WaveformConfig } from '../../types';

type Props = { waveform?: WaveformConfig; seekStartsPlayback?: boolean };

export function CompactLayout({ waveform, seekStartsPlayback }: Props) {
  return (
    <div className="flex items-center gap-3 p-2">
      <PlayButton size="compact" />
      <div className="min-w-0 flex-1">
        <Waveform
          config={waveform}
          height={waveform?.height ?? 24}
          seekStartsPlayback={seekStartsPlayback}
        />
      </div>
      <TimeDisplay />
      <VolumeControl />
    </div>
  );
}