import { cn } from "#lib/utils.ts";
import { separator as styles } from "./classes.ts";

export interface Input extends Marko.Input<"li"> {}

<const/{ class: className, content, ...rest }=input/>

<li
  data-slot="breadcrumb-separator"
  role="presentation"
  aria-hidden="true"
  class=cn(styles.root, className)
  ...rest
>
  <if=content>
    <${content}/>
  </if>
  <else>
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="2"
      stroke-linecap="round"
      stroke-linejoin="round"
      class=styles.icon
    >
      <path d="m9 18 6-6-6-6"/>
    </svg>
  </else>
</li>