(() => {
  class Job {
    logo;
    name;
    details;
    code;
    dateFrom;
    dateTo;

    constructor(logo, name, details, dateFrom, dateTo) {
      this.logo = logo
      this.name = name
      this.details = details
      this.dateFrom = dateFrom
      this.dateTo = dateTo
    }

    _build() {
      return `
      <img src="${this.logo}" class="w-10 h-10 rounded-full" />
      <div class="flex flex-col flex-1">
        <div class="flex justify-between">
          <span class="block text-sm font-bold text-gray-900">${this.name}</span>
          <span class="block text-xs font-bold text-gray-500">${this.dateFrom} - ${this.dateTo}</span>
        </div>
        <span class="block text-xs text-gray-700">${this.details}</span>
      </div>
    `
    }

    show() {
      const container = document.createElement('div')
      container.classList = "flex items-center gap-x-3 border rounded-xl w-full p-2 bg-gray-200"
      container.innerHTML = this._build()
      return container
    }
  }

  // details 
  const data = [
    {
      logo: 'https://ventrahealth.com/wp-content/uploads/2023/08/cropped-Ventra-Health-favicon-circle-192x192.png',
      name: 'Ventra Health',
      details: 'Maintaining and iterating on an internal web application',
      dateFrom: "May 2023",
      dateTo: "Present"
    }, {
      logo: 'https://www.randstadusa.com/themes/custom/bluex/favicon.ico',
      name: 'Randstad Technologies',
      details: 'Built Web Applications for external clients',
      dateFrom: "May 2022",
      dateTo: "May 2023"

    }, {
      logo: 'https://img1.wsimg.com/isteam/ip/9ba626a3-41c9-4092-90b5-cb351983b726/favicon/a8beec51-e35d-4cca-8e88-befa12f687b0.png/:/rs=w:64,h:64,m',
      name: 'Damiano Global Corporation',
      details: 'Built Web Applications for external clients',
      dateFrom: "July 2020",
      dateTo: "Nov 2021"

    }, {
      logo: '#',
      name: 'Makers Ladder LLC',
      details: 'Did some thangs',
      dateFrom: "Dec 2019",
      dateTo: "Apr 2022"

    },
  ]

  // Showings
  const jobsSection = document.getElementById('jobs')

  data.forEach(job => {
    const j = new Job(job.logo, job.name, job.details, job.dateFrom, job.dateTo)
    jobsSection.appendChild(j.show())
  })
})()