// ChartLegendContent — static Marko port of shadcn's <ChartLegendContent>.
// Zero JS; class strings verbatim from chart.tsx.
import { cn } from "#lib/utils.ts";
import { legend as styles } from "./classes.ts";

export interface LegendItem {
  key: string;
  label: string;
  color: string;
  icon?: Marko.Renderable;
}

export interface Input extends Marko.Input<"div"> {
  items: LegendItem[];
  verticalAlign?: "top" | "bottom";
  hideIcon?: boolean;
}

<const/{
  items,
  verticalAlign = "bottom",
  hideIcon,
  class: className,
  ...rest
}=input/>
<const/isTop=(verticalAlign === "top")/>

<div
  ...rest
  class=cn(
    styles.root,
    isTop ? styles.paddingTop : styles.paddingBottom,
    className,
  )
>
  <for|item| of=items>
    <div class=styles.item>
      <if=(item.icon && !hideIcon)>
        <${item.icon}/>
      </if>
      <else>
        <div
          class=styles.swatch
          style={ "background-color": item.color }
        ></div>
      </else>
      ${item.label}
    </div>
  </for>
</div>