(() => {
  class Skill {
    label;
    color;
    constructor(label, color) {
      this.label = label
      this.color = color
    }

    _build() {
      return `${this.label}`
    }
    show() {
      const container = document.createElement('div')
      container.classList = `bg-${this.color} text-white rounded-xl px-2 py-1 text-xs`
      container.innerHTML = this._build()
      return container
    }
  }

  const data = [
    { label: "Typescript", color: "blue-500" },
    { label: "Python", color: "green-800" },
    { label: "Rust", color: "yellow-800" },
    { label: "Javascript", color: "yellow-500" },
  ]

  const container = document.getElementById('skills')
  data.forEach(skill => container.appendChild(new Skill(skill.label, skill.color).show()))
})()