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

interface Props {
	category: UsesCategory;
}

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

<div class="uses-category">
    <div class="meta">
        <h3>{category.title}</h3>
        <p>{category.description}</p>
    </div>
    <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>
</div>

<style>
.uses-category {
    display: flex;
	flex-direction: column;
	padding: 0.5rem;
	background-color: hsl(var(--container-bg));
	padding-bottom: 0;
}

.meta {
	display: flex;
	flex-direction: column;

	h3 {
		font-weight: 700;
		font-size: 1.2rem;
	}

	p {
		font-size: 0.9rem;
		color: hsl(var(--subtext1));
		margin-bottom: 0.5rem;
	}
}

.items {
	display: flex;
	flex-direction: column;
	margin-left: -0.5rem;
	margin-right: -0.5rem;
}

.item {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	gap: 0.5rem;
	padding: 0.2rem 0.5rem;

	background-clip: padding-box;
	border-top: 2px solid hsla(var(--surface1) / 0.25);
	border-bottom: 2px solid transparent;
	margin-top: -2px;


	.label {
		h4 {
			color: hsl(var(--subtext1));
			font-weight: 500;
		}
	}

	.value {
		color: hsl(var(--subtext0));
		font-weight: 400;
		text-align: right;
		.subtext {
			font-size: 0.8rem;
			color: hsla(var(--subtext0) / 0.8);
		}
	}

	&:hover {
		background-color: hsla(var(--surface1) / 0.3);
		border-bottom: 2px solid hsla(var(--surface1) / 0.5);
		border-top: 2px solid hsla(var(--surface1) / 0.5);

		transition: none;

		&:last-child {
    		border-bottom: 2px solid hsla(var(--surface1) / 0.3);
		}

		.label h4, .value p, .value .subtext {
    		color: hsl(var(--text));
            transition: none;
		}
	}
}
</style>