import DateTimeDisplay from "./DateTimeDisplay";
import './timer.css';

const ShowCounter = ({ days, hours, minutes, seconds }) => {
    return (
      <div className="show-counter text-dg-primary-900">
        <a
          href="https://tapasadhikary.com"
          target="_blank"
          rel="noopener noreferrer"
          className="countdown-link"
        >
          <DateTimeDisplay value={days} type={'Days'} isDanger={days <= 3} />
          <p className="md:text-title text-title-mobile font-semibold">:</p>
          <DateTimeDisplay value={hours} type={'Hours'} isDanger={false} />
          <p className="md:text-title text-title-mobile font-semibold">:</p>
          <DateTimeDisplay value={minutes} type={'Mins'} isDanger={false} />
          <p className="md:text-title text-title-mobile font-semibold">:</p>
          <DateTimeDisplay value={seconds} type={'Seconds'} isDanger={false} />
        </a>
      </div>
    );
  };

  export default ShowCounter