import { type HTMLAttributes, Children } from "react";
import { withMiddlot } from "./style.css.ts";

type MiddotSeparatedProps = HTMLAttributes<HTMLDivElement>;

/**
 * A utility component that wraps children into spans and adds middledots
 * between each item using CSS ::before pseudo elements.
 */
export function MiddotSeparated(props: MiddotSeparatedProps) {
  const { children, ...divProps } = props;

  return (
    <div {...divProps}>
      {Children.toArray(children)
        .filter((item) => item !== "")
        .map((item, index) => {
          return (
            <span className={withMiddlot} key={index}>
              {item}
            </span>
          );
        })}
    </div>
  );
}