---
import * as m from "@/paraglide/messages"
import CollapseList from "@/components/collapse/CollapseList.svelte"
import type { CollectionEntry } from "astro:content"

interface Props {
  uses: ReadonlyArray<CollectionEntry<"uses">>
}

const { uses } = Astro.props
// TODO set url anchor to selected hardware
---

<div class="px-2 max-w-[750px] sm:min-w-[750px] w-screen">
  {
    uses.map((hardware) => (
      <div class="my-5">
        <h3>{hardware.data.title}</h3>
        <CollapseList items={hardware.data.hardware} title={m.hardware()} />
        <div class="my-2" />
        {hardware.data.accessories && (
          <CollapseList
            items={hardware.data.accessories}
            title={m.accessories()}
          />
        )}
      </div>
    ))
  }
</div>