import { $html } from "sigpro";
import { val, joinClass } from "../core/utils.js";

/** FIELDSET */
export const Fieldset = (props, children) =>
  $html(
    "fieldset",
    {
      ...props,
      class: joinClass("fieldset bg-base-200 border border-base-300 p-4 rounded-lg", props.class),
    },
    [
      () => {
        const legendText = val(props.legend);
        return legendText ? $html("legend", { class: "fieldset-legend font-bold" }, [legendText]) : null;
      },
      children,
    ],
  );