// Live Thai/EN date+time widget shown in bottom-left corner

function ClockWidget({ lang = "th", rightOffset = 280 }) {
  const [now, setNow] = useState(new Date());

  useEffect(() => {
    const tick = () => setNow(new Date());
    const id = setInterval(tick, 1000);
    return () => clearInterval(id);
  }, []);

  const pad = (n) => String(n).padStart(2, "0");
  const h = pad(now.getHours());
  const m = pad(now.getMinutes());
  const s = pad(now.getSeconds());

  let dateStr = "";
  if (lang === "th") {
    const thDays = ["อาทิตย์", "จันทร์", "อังคาร", "พุธ", "พฤหัสบดี", "ศุกร์", "เสาร์"];
    const thMonths = ["ม.ค.", "ก.พ.", "มี.ค.", "เม.ย.", "พ.ค.", "มิ.ย.", "ก.ค.", "ส.ค.", "ก.ย.", "ต.ค.", "พ.ย.", "ธ.ค."];
    dateStr = `${thDays[now.getDay()]} ${now.getDate()} ${thMonths[now.getMonth()]} ${now.getFullYear() + 543}`;
  } else {
    const enDays = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
    const enMonths = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
    dateStr = `${enDays[now.getDay()]}, ${enMonths[now.getMonth()]} ${now.getDate()}, ${now.getFullYear()}`;
  }

  return (
    <div className="clock-widget" aria-label="Current date and time" style={{ right: rightOffset }}>
      <div className="clock-time">
        {h}:{m}<span className="clock-seconds">:{s}</span>
      </div>
      <div className="clock-date">{dateStr}</div>
    </div>
  );
}