<template>
  <div class="color-pallete">
    <typo-text variant="title-bold">Color Pallete</typo-text>
    <hr class="my-3" />
    <div>
      <div v-for="(item, index) in dataColor" :key="index">
        <typo-text variant="body-1-bold">{{ item.name }}</typo-text>
        <div class="flex flex-col">
          <div
            class="flex w-full my-2"
            v-for="(data, indexData) in item.typeColor"
            :key="indexData"
          >
            <div
              v-for="(color, indexColor) in data.color"
              :key="indexColor"
              class="item-color flex flex-col items-stretch px-3 py-2"
              :class="{ 'border-color': item.name == 'Neutral Color' }"
              :style="{
                background: `#${color}`,
                color: indexColor > 2 ? '#F5F6F7' : '',
              }"
            >
              <typo-text variant="body-2-bold" style="height: 100%">
                {{ data.typeName }}-{{ indexColor + 1 }}
              </typo-text>
              <typo-text variant="body-2-regular">{{ color }}</typo-text>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import TypoText from "@/components/Typography/TypoText";

export default {
  components: {
    TypoText,
  },
  data() {
    return {
      dataColor: [
        {
          name: "Primary Color",
          typeColor: [
            {
              typeName: "clear-blue",
              color: [
                "EEF9FD",
                "B7E5F6",
                "70CCEE",
                "11AAE2",
                "0E88B5",
                "095571",
                "063B4F",
              ],
            },
            {
              typeName: "dark-blue",
              color: [
                "F1F6FB",
                "C5D8EC",
                "8BB1D9",
                "3E7DC0",
                "32649A",
                "1F3F60",
                "162C43",
              ],
            },
            {
              typeName: "azure-blue",
              color: [
                "EEF1F4",
                "B8C3CE",
                "72879E",
                "14375E",
                "102C4B",
                "0A1C2F",
                "071321",
              ],
            },
          ],
        },
        {
          name: "Status Color",
          typeColor: [
            {
              typeName: "success",
              color: [
                "EEF9F4",
                "B7E5CE",
                "6FCB9E",
                "0FA85E",
                "0C864B",
                "08542F",
                "053B21",
              ],
            },
            {
              typeName: "warning",
              color: [
                "FFFAED",
                "FDE8B3",
                "FCD168",
                "FAB303",
                "C88F02",
                "805B00",
                "594000",
              ],
            },
            {
              typeName: "critical",
              color: [
                "FDF0EF",
                "F6C0BC",
                "EC837A",
                "E03021",
                "B3261A",
                "701811",
                "4E110C",
              ],
            },
          ],
        },
        {
          name: "Neutral Color",
          typeColor: [
            {
              typeName: "neutral",
              color: [
                "F5F6F7",
                "D4D7DB",
                "A9B0B8",
                "6F7C89",
                "59636E",
                "383E45",
                "272B30",
              ],
            },
            {
              typeName: "white",
              color: ["FFFFFF"],
            },
          ],
        },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
.color-pallete {
  .item-color {
    height: 68px;
    width: calc(100% / 7);
  }
  .border-color {
    border: 1px solid #d4d7db;
    border-left: none;
    border-right: none;
  }
  .border-color:first-child {
    border-left: 1px solid #d4d7db;
    border-right: 1px solid #d4d7db;
  }
}
</style>
