import type { CSSProperties, ReactNode } from "react";

export const PN_CARD_CLASS = "pn-card flex flex-col gap-2 rounded-md border border-border bg-surface p-4";

export function WidgetCard({
  span = 3,
  rowSpan,
  children,
}: {
  span?: number;
  rowSpan?: number;
  children: ReactNode;
}) {
  const style: CSSProperties = {
    gridColumn: `span ${span}`,
    ...(rowSpan ? { gridRow: `span ${rowSpan}` } : {}),
  };

  return (
    <div className={PN_CARD_CLASS} style={style}>
      {children}
    </div>
  );
}