'use client';

import { ControlsRow } from '../Controls';
import { Cover, ReactivePulse } from '../Cover';
import { ErrorState } from '../ErrorState';
import { Artist, Title } from '../Meta';
import { Waveform } from '../Waveform';
import type { ReactiveCoverMode, WaveformConfig } from '../../types';
import { usePlayerMeta } from '../../context/selectors';

type Props = {
  waveform?: WaveformConfig;
  reactiveCover?: ReactiveCoverMode;
  onPrev?: () => void;
  onNext?: () => void;
  seekStartsPlayback?: boolean;
};

export function DefaultLayout({ waveform, reactiveCover, onPrev, onNext, seekStartsPlayback }: Props) {
  const meta = usePlayerMeta();
  const cover = (
    <Cover src={meta.cover} alt={meta.title ? `${meta.title} cover` : ''} size={56} />
  );
  return (
    <div className="flex flex-col gap-3.5 p-4">
      {/* Header: cover ↔ meta, vertically centered. No timer here — timer
          lives in ControlsRow next to playback. */}
      <div className="flex items-center gap-3">
        {reactiveCover === 'subtle' ? (
          <ReactivePulse enabled>{cover}</ReactivePulse>
        ) : (
          cover
        )}
        <div className="min-w-0 flex-1">
          <Title />
          <Artist />
        </div>
      </div>
      <Waveform
        config={waveform}
        height={waveform?.height ?? 40}
        seekStartsPlayback={seekStartsPlayback}
      />
      <ErrorState />
      <ControlsRow onPrev={onPrev} onNext={onNext} showTime />
    </div>
  );
}