<script setup lang="ts">
import DocsComponents from "@/components/docs/DocsComponents.vue";
import { Gspinner } from "@/components";
import { ref } from "vue";

type SpinnerSize = "sm" | "md" | "lg";
type VariantType = "primary" | "secondary" | "orange" | "red" | "green-dark";

const size = ref<SpinnerSize>("md");
const variant = ref<VariantType>("primary");

const sizes = ref<SpinnerSize[]>(["sm", "md", "lg"]);
const variants = ref<VariantType[]>(["primary", "secondary", "orange", "red", "green-dark"]);
</script>

<template>
  <DocsComponents>
    <template v-slot:name>Spinner</template>
    <template v-slot:component>
      <Gspinner :variant :size />
    </template>

    <template v-slot:props>
      <div class="form-container">
        <div class="form-group">
          <label for="variants">size</label>
          <select id="variants" v-model="size" name="variants">
            <option v-for="(size, index) in sizes" :key="index" :value="size">
              {{ size }}
            </option>
          </select>
        </div>

        <div class="form-group">
          <label for="variants">variant</label>
          <select id="variants" v-model="variant" name="variants">
            <option v-for="(variant, index) in variants" :key="index" :value="variant">
              {{ variant }}
            </option>
          </select>
        </div>
      </div>
    </template>
  </DocsComponents>
</template>

<style lang="scss" scoped>
.content-modal {
  width: 100%;
  height: 100%;
  padding: 20px;
  display: flex;
  justify-content: center;
  border-radius: 10px;
  background: #f7f7f7;

  span {
    color: #81858e;

    font-family: "Plus Jakarta Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
  }
}

.form-container {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);

  .form-group.checkbox {
    flex-direction: row !important;
  }

  .form-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1);

    label {
      font-weight: bold;
    }

    select,
    input[type="text"],
    input[type="checkbox"] {
      padding: var(--spacing-2);
      font-size: var(--font-base);
      border: 1px solid var(--gray-100);
      border-radius: var(--radius);
    }

    input[type="checkbox"] {
      width: var(--w-5);
      height: var(--h-5);
    }
  }
}
</style>
