text: //EXPORTING
  //REACT
  import React, { useState, useEffect } from 'react'
  //STYLES
  import styles from './Countdown.module.scss'
  
  //COUNTDOWN
  const Countdown = ({
    className,
    date: targetDate = new Date(),
    countdownText = {
      days: ['day', 'days'],
      hours: ['hour', 'hours'],
      minutes: ['minute', 'minutes'],
      seconds: ['second', 'seconds'],
    },
  }) => {
    const [timeLeft, setTimeLeft] = useState({
      days: 0,
      hours: 0,
      minutes: 0,
      seconds: 0,
    })
  
    //COUNTDOWN UPDATE
    useEffect(() => {
      const updateCountdown = () => {
        let diff =
          (Date.parse(new Date(targetDate)) - Date.parse(new Date())) / 1000
  
        if (diff < 0) return
  
        const timeDiff = {
          years: 0,
          days: 0,
          hours: 0,
          minutes: 0,
          seconds: 0,
        }
  
        const minuteInSec = 60
        const hourInSec = 60 * minuteInSec
        const dayInSec = 24 * hourInSec
        const yearInSec = 365.25 * dayInSec
        if (diff >= yearInSec) {
          timeDiff.years = Math.floor(diff / yearInSec)
          diff -= timeDiff.years * yearInSec
        }
        if (diff >= dayInSec) {
          timeDiff.days = Math.floor(diff / dayInSec)
          diff -= timeDiff.days * dayInSec
        }
        if (diff >= hourInSec) {
          timeDiff.hours = Math.floor(diff / hourInSec)
          diff -= timeDiff.hours * hourInSec
        }
        if (diff >= minuteInSec) {
          timeDiff.minutes = Math.floor(diff / minuteInSec)
          diff -= timeDiff.minutes * minuteInSec
        }
        timeDiff.seconds = diff
  
        setTimeLeft(timeDiff)
      }
  
      updateCountdown()
  
      const interval = setInterval(updateCountdown, 1000)
      return () => clearInterval(interval)
    }, [targetDate])
  
    const addLeadingZeros = (value) => {
      value = String(value)
      return value.length < 2 ? '0' + value : value
    }
  
    //RETURN
    return (
      <div className={className}>
        {['days', 'hours', 'minutes', 'seconds'].map((timePart) => (
          <div key={timePart} className={styles.column}>
            <div className={styles.columnElement}>
              <div className={styles.columnElementNumber}>
                {addLeadingZeros(timeLeft[timePart])}
              </div>
              <div>
                {countdownText[timePart][timeLeft[timePart] === 1 ? 0 : 1]}
              </div>
            </div>
          </div>
        ))}
      </div>
    )
  }
  
  //EXPORTING COUNTDOWN
  export default Countdown
  