import { cn } from "@/lib/utils";

export function Panel({
  children,
  className,
  elevated = false,
}: {
  children: React.ReactNode;
  className?: string;
  elevated?: boolean;
}) {
  return <div className={cn(elevated ? "panel-elev" : "panel", className)}>{children}</div>;
}

export function PanelHeader({
  title,
  subtitle,
  trailing,
  className,
}: {
  title: React.ReactNode;
  subtitle?: React.ReactNode;
  trailing?: React.ReactNode;
  className?: string;
}) {
  return (
    <div className={cn("flex items-start justify-between gap-4 px-6 py-5 border-b border-border", className)}>
      <div className="min-w-0">
        <h3 className="text-sm font-semibold text-text">{title}</h3>
        {subtitle && <p className="mt-0.5 text-xs text-text-dim">{subtitle}</p>}
      </div>
      {trailing && <div className="flex items-center gap-2 shrink-0">{trailing}</div>}
    </div>
  );
}