import React, { useState, useEffect } from 'react';
import './Countdown.css';

const pad = (n) => String(n).padStart(2, '0');

export default function Countdown({ target = Date.now() + 3600000 }) {
  const [now, setNow] = useState(Date.now());
  useEffect(() => {
    const t = setInterval(() => setNow(Date.now()), 1000);
    return () => clearInterval(t);
  }, []);
  const diff = Math.max(0, target - now);
  const d = Math.floor(diff / 86400000);
  const h = Math.floor((diff % 86400000) / 3600000);
  const m = Math.floor((diff % 3600000) / 60000);
  const s = Math.floor((diff % 60000) / 1000);

  return (
    <div className="aa-countdown">
      {d > 0 && (
        <span className="aa-countdown-seg">
          <span className="aa-countdown-num">{pad(d)}</span>
          <span className="aa-countdown-label">天</span>
        </span>
      )}
      <span className="aa-countdown-seg">
        <span className="aa-countdown-num">{pad(h)}</span>
        <span className="aa-countdown-label">时</span>
      </span>
      <span className="aa-countdown-sep">:</span>
      <span className="aa-countdown-seg">
        <span className="aa-countdown-num">{pad(m)}</span>
        <span className="aa-countdown-label">分</span>
      </span>
      <span className="aa-countdown-sep">:</span>
      <span className="aa-countdown-seg">
        <span className="aa-countdown-num">{pad(s)}</span>
        <span className="aa-countdown-label">秒</span>
      </span>
    </div>
  );
}