class Tag {
  constructor(variant, style = "") {
    this.variant = variant;
    this.style = style;
  }
}

window.addEventListener("load", () => {
  const clipping_text = `
    display: inline;
    background-clip: text;
    -webkit-background-clip: text; /* Chromium fix */
    color: transparent;
  `;

  const tags = [
    new Tag("Comment ça marche un PC 😵‍💫"),
    new Tag("Idiot certifié"),
    new Tag("undefined", "font-family: monospace"),
    new Tag("/api/v1/love", "font-family: monospace"),
    new Tag("Étudiant qui va rater son master"),
    new Tag("Peak D2 sur Valo 🤡"),
    new Tag(
      "0x520",
      `
        background: linear-gradient(to bottom right, red 0%, red 50%, black 50%);
        ${clipping_text}
      `
    ),
    new Tag("Nul en CSS", "font-family: 'Comic Sans MS', cursive"),
    new Tag("Mention poufiasse"),
    new Tag("anri k... caterpillar 🐛☝️"),
    new Tag(
      "Free Ukraine",
      `
        background: linear-gradient(to bottom, DodgerBlue 57%, gold 43%);
        ${clipping_text}
      `
    ),
    new Tag(
      "Free Palestine",
      `
        background: conic-gradient(at 30% 60%, transparent 230deg, red 0, red 310deg, transparent 0),
                    linear-gradient(to bottom, black 45%, white 45%, white 67%, DarkGreen 67%);
        ${clipping_text}
        -webkit-text-stroke: 0.2px var(--font-color);
      `
    ),
  ];

  const random = Math.round(Math.random() * (tags.length - 1));
  const element = document.getElementById("subname");
  element.textContent = tags[random].variant;
  element.style = tags[random].style;
});