const initCustomCountdown = ({date, selector}) => {
  // check for date 
  if(!date) {
    console.error('Please provide a valid date for the countdown. Example: "Mar 30, 2024 14:44:25"');
    // 2 da from now
    date = new Date();
  }
  // Set the date we're counting down to
  var countDownDate = new Date(date ?? "Mar 30, 2024 14:44:25").getTime();

  if(!document.querySelector(`${selector}`)) {
    console.error('The selector provided does not exist in the DOM. Please provide a valid selector. Example: #customCountdown, .custom-countdown, [data-custom-countdown]');
    return;
  }

  // Update the count down every 1 second
  var x = setInterval(function() {
      // Get today's date and time
      var now = new Date().getTime();

      // Find the distance between now and the count down date
      var distance = countDownDate - now;

      // Calculate weeks, days, hours, minutes, and seconds
      var weeks = Math.floor(distance / (1000 * 60 * 60 * 24 * 7));
      var days = Math.floor((distance % (1000 * 60 * 60 * 24 * 7)) / (1000 * 60 * 60 * 24));
      var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
      var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
      var seconds = Math.floor((distance % (1000 * 60)) / 1000);

      // get the elements
      var weeksEl = document.querySelector(`${selector} .weeks .count`);
      var daysEl = document.querySelector(`${selector} .days .count`);
      var hoursEl = document.querySelector(`${selector} .hours .count`);
      var minutesEl = document.querySelector(`${selector} .minutes .count`);
      var secondsEl = document.querySelector(`${selector} .seconds .count`);

      // Display the countdown
      // if weeks is less than 10, add a leading zero
      if(weeks >= 0) {
        weeksEl.innerHTML = weeks < 10 ? `0${weeks}` : weeks;
      }else {
        weeksEl.innerHTML = '00';
      }

      if(days >= 0) {
        daysEl.innerHTML = days < 10 ? `0${days}` : days;
      } else {
        daysEl.innerHTML = '00';
      }

      if(hours >= 0) {
        hoursEl.innerHTML = hours < 10 ? `0${hours}` : hours;
      }else {
        hoursEl.innerHTML = '00';
      }

      if(minutes >= 0) {
        minutesEl.innerHTML = minutes < 10 ? `0${minutes}` : minutes;
      }else {
        minutesEl.innerHTML = '00';
      }

      if(seconds >= 0) {
        secondsEl.innerHTML = seconds < 10 ? `0${seconds}` : seconds;
      }else {
        secondsEl.innerHTML = '00';
      }

      // update the spinner percentage for weeks
      var spinnerWeeksPercentage = 100 - ((weeks * 100) / 52);
      document.querySelector(`${selector} .weeks .countdown-spinner`).style.setProperty('--spinner-percentage', spinnerWeeksPercentage <= 0 ? "100" : `${spinnerWeeksPercentage}`);

      // update the spinner percentage for days
      var spinnerDaysPercentage = 100 - ((days * 100) / 7);
      document.querySelector(`${selector} .days .countdown-spinner`).style.setProperty('--spinner-percentage', spinnerDaysPercentage <= 0 ? "100" : `${spinnerDaysPercentage}`);

      // update the spinner percentage for hours
      var spinnerHoursPercentage = 100 - ((hours * 100) / 24);
      document.querySelector(`${selector} .hours .countdown-spinner`).style.setProperty('--spinner-percentage', spinnerHoursPercentage <= 0 ? "100" : `${spinnerHoursPercentage}`);

      // update the spinner percentage for minutes
      var spinnerMinPercentage = 100 - ((minutes * 100) / 60);
      document.querySelector(`${selector} .minutes .countdown-spinner`).style.setProperty('--spinner-percentage', spinnerMinPercentage <= 0 ? "100" : `${spinnerMinPercentage}`);

      // update the spinner percentage for seconds
      var spinnerSecPercentage = 100 - ((100 * seconds) / 60);
      document.querySelector(`${selector} .seconds .countdown-spinner`).style.setProperty('--spinner-percentage', spinnerSecPercentage <= 0 ? "100" : `${spinnerSecPercentage}`);

      // Stop the countdown when it reaches zero
      if (distance < 0) {
          clearInterval(x);
      }
  }, 1000);
}