---
import Li from "@components/Li.astro";
import type { ComponentPropsBase } from "@interfaces/components.ts";

import type { lineItem } from "@interfaces/ul-li.ts";

interface Props extends ComponentPropsBase {
  lineItems?: lineItem[];
  depth?: number;
}

const { class: className, lineItems, depth = 0 } = Astro.props;
---

<ul
  class:list={[
    "list-outside list-disc",
    className,
    depth > 0 ? "ps-3" : "ms-3",
  ]}
>
  {
    lineItems ? (
      lineItems.map((line) => (
        <Li>
          {line.item}
          {line.subItems ? (
            <Astro.self
              class={className}
              lineItems={line.subItems}
              depth={depth + 1}
            />
          ) : undefined}
        </Li>
      ))
    ) : (
      <slot />
    )
  }
</ul>