<script setup lang="ts"></script>

<template>
  <section>
    <div class="container">
      <div class="component-name">
        #
        <slot name="name" />
      </div>
      <div class="component-content">
        <div class="component">
          <slot name="component" />
        </div>
        <div class="props">
          <slot name="props" />
        </div>
      </div>
    </div>
  </section>
</template>

<style lang="scss" scoped>
section {
  background: rgba(229, 231, 231, 0.15);
  padding: var(--spacing-7) var(--spacing-20);
  @media (max-width: 768px) {
    height: 100%;
    padding: var(--spacing-5) var(--spacing-6);
  }

  .container {
    background: var(--gray-white);
    border-radius: var(--radius-lg);
    border: 1px solid var(--gray-100);
    width: var(--w-full);
    height: auto;

    .component-name {
      font-size: var(--font-2xl);
      color: var(--gray-50) 0;
      font-weight: var(--weight-medium);
      padding: var(--spacing-2-5);
      border-bottom: 1px solid var(--gray-100);
    }

    .component-content {
      display: grid;
      grid-template-columns: 1fr 350px;
      @media (max-width: 768px) {
        grid-template-columns: 1fr;
      }

      .component,
      .props {
        padding: var(--spacing-2-5);
        display: grid;
        justify-content: center;
      }

      .props {
        border-left: 1px solid var(--gray-100);
        overflow-y: scroll;
        height: calc(53vh);
      }
    }
  }
}
</style>
