import type { CSSProperties, ReactNode } from "react";
import type { PCOStyle } from "./types";
import { pcoSectionToCssVars } from "./pcoTheme";

export function styleToCss(s?: PCOStyle): CSSProperties {
  return pcoSectionToCssVars(s);
}

export function cardStyleVars(s?: PCOStyle, fallback?: { bg?: string; border?: string; text?: string }): CSSProperties {
  const vars: Record<string, string> = {};
  const bg = s?.cardBackgroundColor ?? fallback?.bg;
  const border = s?.cardBorderColor ?? fallback?.border;
  const text = s?.cardTextColor ?? fallback?.text;
  if (bg) vars["--pco-card-bg"] = bg;
  if (border) vars["--pco-card-border"] = border;
  if (text) vars["--pco-card-text"] = text;
  return vars as CSSProperties;
}

type StyledSectionProps = {
  number?: string;
  title: string;
  style?: PCOStyle;
  children: ReactNode;
};

export function StyledOverviewSection({ number, title, style: sectionStyle, children }: StyledSectionProps) {
  const sectionCss = pcoSectionToCssVars(sectionStyle);

  return (
    <section className="pco-section" style={sectionCss}>
      {sectionStyle?.icon ? (
        <span className="pco-section-icon" aria-hidden>
          {sectionStyle.icon}
        </span>
      ) : null}
      {sectionStyle?.imageUrl ? (
        <img src={sectionStyle.imageUrl} alt="" className="pco-section-image mb-3 max-h-24 object-contain" />
      ) : null}
      <h3>
        {number ? <span className="pco-num">{number}</span> : null}
        {title}
      </h3>
      {children}
    </section>
  );
}