---
import type { GlossaryRelationBlock } from "../lib/glossary";
import { hrefOfGlossaryEntry } from "../lib/glossary";

interface Props {
  relationBlocks: GlossaryRelationBlock[];
}

const { relationBlocks = [] } = Astro.props;
---

{relationBlocks.length > 0 && (
  <section class="glossary-relations" aria-label="Relations conceptuelles">
    <h2>Relations conceptuelles</h2>

    <div class="glossary-relations-grid">
      {relationBlocks.map((block) => (
        <section class={`glossary-relations-card ${block.className}`}>
          <h3>{block.title}</h3>
          <ul>
            {block.items.map((item) => (
              <li>
                <a href={hrefOfGlossaryEntry(item)}>{item.data.term}</a>
                <span> — {item.data.definitionShort}</span>
              </li>
            ))}
          </ul>
        </section>
      ))}
    </div>
  </section>
)}

<style>
  .glossary-relations{
    margin-top: 26px;
    padding-top: 18px;
    border-top: 1px solid rgba(127,127,127,0.18);
  }

  .glossary-relations h2{
    margin-bottom: 14px;
  }

  .glossary-relations-grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
  }

  .glossary-relations-card{
    border: 1px solid rgba(127,127,127,0.22);
    border-radius: 16px;
    padding: 14px 16px;
    background: rgba(127,127,127,0.05);
  }

  .glossary-relations-card h3{
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 15px;
    line-height: 1.35;
  }

  .glossary-relations-card ul{
    margin: 0;
    padding-left: 18px;
  }

  .glossary-relations-card li{
    margin-bottom: 8px;
    font-size: 14px;
    line-height: 1.45;
  }

  .glossary-relations-card li:last-child{
    margin-bottom: 0;
  }

  .glossary-relations-card span{
    opacity: .9;
  }

  @media (prefers-color-scheme: dark){
    .glossary-relations-card{
      background: rgba(255,255,255,0.04);
    }
  }
</style>