/* eslint-disable @typescript-eslint/no-explicit-any */
"use client";

import styles from "./member-greeting.module.scss";
import { usePage } from "@inertiajs/react";

const MemberGreeting = () => {
  const now = new Date();
  const { auth } = usePage().props as any;

  /* ================= NIGERIA TIME ================= */
  const formatter = new Intl.DateTimeFormat("en-NG", {
    timeZone: "Africa/Lagos",
    weekday: "long",
    month: "long",
    day: "numeric",
    year: "numeric",
    hour: "numeric",
    minute: "2-digit",
    hour12: true,
  });

  const parts = formatter.formatToParts(now);

  const getPart = (type: string) =>
    parts.find((p) => p.type === type)?.value || "";

  const weekday = getPart("weekday");
  const month = getPart("month");
  const day = getPart("day");
  const year = getPart("year");
  const hour = getPart("hour");
  const minute = getPart("minute");
  const dayPeriod = getPart("dayPeriod"); // am / pm

  /* ================= GREETING ================= */
  const hourNumber = Number(hour);

  const getGreeting = () => {
    if (dayPeriod === "am" && hourNumber < 12) return "Good morning ☀️";
    if (dayPeriod === "pm" && hourNumber < 5) return "Good afternoon 🌤️";
    return "Good evening 🌙";
  };

  return (
    <div className={styles.wrapper}>
      <div className={styles.left}>
        <div className={styles.text}>
          <h1>
            {auth?.user?.name?.split(" ")[0]}, {getGreeting()}
          </h1>

          <p className={styles.meta}>
            {weekday}, {month} {day}, {year} • {hour}:{minute} {dayPeriod}
          </p>
        </div>
      </div>
    </div>
  );
};

export default MemberGreeting;