<template>
  <div class="typography">
    <typo-text variant="title-bold">Typography</typo-text>
    <hr class="my-3" />
    <typo-text variant="body-1-bold">Typeface</typo-text>
    <typo-text
      variant="body-1-regular"
      class="my-0"
      style="line-height: normal"
    >
      Typeface yang digunakan dalam desain pajak.io adalah
      <span class="body-1-bold" style="line-height: normal">Avenir</span>
    </typo-text>
    <!-- <a
      class="body-1-bold"
      href="https://fonts.google.com/specimen/Open+Sans"
      target="_blank"
    >
      https://fonts.google.com/specimen/Open+Sans
    </a> -->
    <div class="text-a">Aa</div>
    <div class="mt-5">
      <typo-text variant="body-1-bold" class="mb-1">Text Style</typo-text>
      <table class="w-full">
        <thead>
          <tr class="caption-bold">
            <th class="pl-4" align="left">Style Name</th>
            <th align="left">Weight</th>
            <th align="left">Font size</th>
            <th align="left">Line height</th>
            <th align="left">Spacing</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in dataTable" :key="index">
            <td class="pl-4 py-2">
              <typo-text :variant="item.name">{{ item.name }}</typo-text>
            </td>
            <td class="py-2">
              <typo-text :variant="item.name">{{ item.weight }}</typo-text>
            </td>
            <td class="py-2">
              <typo-text :variant="item.name">{{ item.size }}</typo-text>
            </td>
            <td class="py-2">
              <typo-text :variant="item.name">{{ item.line }}</typo-text>
            </td>
            <td class="py-2">
              <typo-text :variant="item.name">{{ item.spacing }}</typo-text>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <code>
      <pre style="background: #f5f6f7; padding: 32px 44px;">
{{
  `<typo-text 
  :variant="Style Name"
  color="red || #FF0000"
  weight="700"
>
  Title Typography
</typo-text>`
}}
      </pre>
    </code>
  </div>
</template>

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

export default {
  components: {
    TypoText,
  },
  data() {
    return {
      dataTable: [
        {
          name: "title-bold",
          weight: "700",
          size: "24px",
          line: "36px",
          spacing: "-1%",
        },
        {
          name: "title-regular",
          weight: "400",
          size: "24px",
          line: "36px",
          spacing: "-1%",
        },
        {
          name: "heading-bold",
          weight: "700",
          size: "18px",
          line: "36px",
          spacing: "-2%",
        },
        {
          name: "heading-regular",
          weight: "400",
          size: "18px",
          line: "36px",
          spacing: "-2%",
        },
        {
          name: "body-1-bold",
          weight: "700",
          size: "14px",
          line: "36px",
          spacing: "0%",
        },
        {
          name: "body-1-regular",
          weight: "400",
          size: "14px",
          line: "36px",
          spacing: "0%",
        },
        {
          name: "body-2-bold",
          weight: "700",
          size: "12px",
          line: "16px",
          spacing: "0%",
        },
        {
          name: "body-2-regular",
          weight: "400",
          size: "12px",
          line: "16px",
          spacing: "0%",
        },
        {
          name: "caption-bold",
          weight: "700",
          size: "10px",
          line: "16px",
          spacing: "2%",
        },
        {
          name: "caption-regular",
          weight: "400",
          size: "10px",
          line: "16px",
          spacing: "2%",
        },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
@use "@/assets/style/_color.scss" as *;

.typography {
  .caption-bold {
    font-weight: 700;
    font-size: 10px;
  }
  a {
    text-decoration: none;
    color: $dark-blue-4;
  }
  .text-a {
    font-weight: 500;
    font-size: 109.6px;
    line-height: 100%;
  }
  table {
    border-collapse: collapse;
    th {
      color: $neutral-4;
      border-bottom: 1px solid #d4d7db;
      padding-bottom: 11px;
    }
    tr {
      td {
        border-bottom: 1px solid #d4d7db;
      }
    }
    tr:last-child {
      td {
        border-bottom: none;
      }
    }
  }
  .body-1-bold {
    font-weight: 700;
    font-size: 14px;
  }
}
</style>
