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

type OverviewCardProps = {
  children: ReactNode;
  className?: string;
  cardColor?: string;
  cardBorderColor?: string;
  cardTextColor?: string;
};

export function OverviewCard({
  children,
  className = "",
  cardColor,
  cardBorderColor,
  cardTextColor,
}: OverviewCardProps) {
  const style: CSSProperties = {};
  if (cardColor) (style as Record<string, string>)["--pco-card-bg"] = cardColor;
  if (cardBorderColor) (style as Record<string, string>)["--pco-card-border"] = cardBorderColor;
  if (cardTextColor) style.color = cardTextColor;

  return (
    <div className={`pco-card ${className}`.trim()} style={style}>
      {children}
    </div>
  );
}