---
import type { UsesCategory } from "@/types";
import "@/css/uses.css";

interface Props {
	category: UsesCategory;
}

const { category } = Astro.props;
const { items } = category;
---

<details class="uses-category">
    <summary class="meta">
        <div class="meta-content">
            <h3>{category.title}</h3>
            <p>{category.description}</p>
        </div>
        <div class="meta-arrow">
            <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="currentColor"><path d="M480-528 296-344l-56-56 240-240 240 240-56 56-184-184Z"/></svg>
        </div>
    </summary>
    <div class="items">
        {items.map((item) => (
            <div class="item">
                <div class="label">
                    <h4>{item.label}</h4>
                </div>
                <div class="value">
                    <p>{item.value}</p>
                    {item.subtext && <p class="subtext">{item.subtext}</p>}
                </div>
            </div>
        ))}
    </div>
</details>