import type { ReactNode } from "react";
import { type LucideIcon } from "lucide-react";
import { cn } from "./cn";

// Card 基础卡片容器。
export function Card({ className, children }: { className?: string; children: ReactNode }) {
  return <div className={cn("rounded-lg border border-line bg-ink-900 shadow-card", className)}>{children}</div>;
}

// Panel 带表头的分区面板（表头 icon+标题+右侧动作，主体可滚动）。
export function Panel({
  title,
  icon: Icon,
  actions,
  className,
  bodyClassName,
  children,
}: {
  title: ReactNode;
  icon?: LucideIcon;
  actions?: ReactNode;
  className?: string;
  bodyClassName?: string;
  children: ReactNode;
}) {
  return (
    <section className={cn("flex min-h-0 flex-col rounded-lg border border-line bg-ink-900 shadow-card", className)}>
      <div className="flex items-center gap-2 border-b border-line px-4 py-2.5">
        {Icon && <Icon className="h-3.5 w-3.5 text-slate-500" strokeWidth={2} />}
        <span className="text-[11px] font-medium text-slate-400">{title}</span>
        {actions && <div className="ml-auto flex items-center gap-2">{actions}</div>}
      </div>
      <div className={cn("min-h-0 flex-1 overflow-y-auto p-4", bodyClassName)}>{children}</div>
    </section>
  );
}
