"use client";

import type { ReactNode } from "react";

import { playerPageShellPadding } from "@/lib/player-spacing";
import { playerContentColumnClass } from "@/lib/player-viewport";
import { cn } from "@/lib/utils";

type PlayerPanelProps = {
  /** 保留供调用方语义标注，不再渲染页内顶栏（导航由外壳侧栏/顶栏承担） */
  title?: string;
  children: ReactNode;
  backHref?: string;
  backLabel?: string;
  className?: string;
  containerClassName?: string;
};

export function PlayerPanel({
  children,
  className,
  containerClassName,
}: PlayerPanelProps) {
  return (
    <div className={cn(playerContentColumnClass, containerClassName)}>
      <section
        className={cn(
          "bg-white text-slate-900 lg:rounded-2xl lg:border lg:border-[#e4ebf5] lg:shadow-sm",
          playerPageShellPadding,
          className,
        )}
      >
        {children}
      </section>
    </div>
  );
}