/* global React */
const { useState, useEffect, useRef, useMemo } = React;

// ===================== EMPTY STATE =====================
function EmptyState() {
  const greeting = useMemo(() => {
    const h = new Date().getHours();
    if (h < 5) return "Working late";
    if (h < 12) return "Good morning";
    if (h < 18) return "Good afternoon";
    return "Good evening";
  }, []);

  return (
    <div className="empty">
      <div className="empty-inner">
        <div className="greeting">
          <img className="greeting-mark light-only" src="assets/greeting-mark.svg" alt="" />
          <img className="greeting-mark dark-only"  src="assets/greeting-mark-dark.svg" alt="" />
          <h1 className="empty-title">{greeting}, <em>ask Shannon anything</em></h1>
          <p className="empty-sub">Choose a model, set the reasoning level, and ask Shannon anything.</p>
        </div>
      </div>
    </div>
  );
}

window.EmptyState = EmptyState;