---
import type { QuickshellVariant } from "@config/io/types";
import TypeDetails from "./TypeDetails.astro";
import TypeTitle from "./TypeTitle.astro";

export interface Props {
  variants: QuickshellVariant;
}

const { variants } = Astro.props;
---
<ul class="typedata typevariants">
  {
    Object.entries(variants).map(([name, variantData]) => {
      const paramKeys = variantData.params && variantData.params.length > 0
        ? variantData.params.map(param => param.name)
        : [];
      return (
        <li id={ name } class="typedata-root typevariant-root">
          <TypeTitle 
            typekind="variant"
            typename={name}
            typelink=""
            typelink_text=""
          />
          {
            paramKeys ? (
              <div class="typedata-params typevariant-params">
                {paramKeys.map(paramKey => (
                  <span class="typedata-param typevariant-param">{paramKey}</span>
                ))}
              </div>
            )
            :null
          }
          <TypeDetails markdown={variantData.details} />
        </li>
      )
    })
  }
</ul>

