import {
  SoundPresetControls,
  type SoundTrackKey,
} from '@/features/sound-preset';

interface SoundSheetWidgetProps {
  onClose: () => void;
  selectedPresetId: string;
  onSelectPreset: (presetId: string) => void;
  isMixerOpen: boolean;
  onToggleMixer: () => void;
  isMuted: boolean;
  onMuteChange: (next: boolean) => void;
  masterVolume: number;
  onMasterVolumeChange: (next: number) => void;
  trackKeys: readonly SoundTrackKey[];
  trackLevels: Record<SoundTrackKey, number>;
  onTrackLevelChange: (track: SoundTrackKey, level: number) => void;
}

export const SoundSheetWidget = ({
  onClose,
  selectedPresetId,
  onSelectPreset,
  isMixerOpen,
  onToggleMixer,
  isMuted,
  onMuteChange,
  masterVolume,
  onMasterVolumeChange,
  trackKeys,
  trackLevels,
  onTrackLevelChange,
}: SoundSheetWidgetProps) => {
  return (
    <aside className="fixed bottom-4 right-16 top-4 z-40 w-[min(92vw,340px)] animate-[sheet-in_220ms_ease-out] motion-reduce:animate-none">
      <div className="flex h-full flex-col overflow-hidden rounded-2xl border border-white/20 bg-slate-950/72 shadow-[0_18px_60px_rgba(2,6,23,0.52)] backdrop-blur-xl">
        <header className="flex items-center justify-between border-b border-white/12 px-4 py-4">
          <div>
            <h2 className="text-base font-semibold text-white">Sound</h2>
            <p className="text-[11px] text-white/56">오디오 재생은 연결하지 않은 UI 목업입니다.</p>
          </div>
          <button
            type="button"
            onClick={onClose}
            className="rounded-lg border border-white/20 px-2 py-1 text-xs text-white/75 transition hover:bg-white/12 hover:text-white"
          >
            X
          </button>
        </header>

        <div className="flex-1 overflow-y-auto px-4 py-4">
          <SoundPresetControls
            selectedPresetId={selectedPresetId}
            onSelectPreset={onSelectPreset}
            isMixerOpen={isMixerOpen}
            onToggleMixer={onToggleMixer}
            isMuted={isMuted}
            onMuteChange={onMuteChange}
            masterVolume={masterVolume}
            onMasterVolumeChange={onMasterVolumeChange}
            trackKeys={trackKeys}
            trackLevels={trackLevels}
            onTrackLevelChange={onTrackLevelChange}
          />
        </div>
      </div>
    </aside>
  );
};