import FormBox from "../components/FormBox";
import { useTranslation } from "react-i18next";
import { getUserInfoFromSession } from "../util/util";

function Home() {
  const { t } = useTranslation();
  const holidayList = [{ date: '23 May, 2024', name: 'Buddha Purnima' }, { date: '15 June, 2024', name: 'Raja Sankranti' }];
  const homePageNotifications = ['hpn_complete_before_31', 'hpn_npa', 'hpn_helpdesk_contact', 'hpn_rupay_kcc_time', 'hpn_rupay_kcc_atm'];
  const userInformation = getUserInfoFromSession();

  return (
    <div className="flex flex-grow gap-7">
      <div className="flex gap-7 flex-col basis-1/3">
        <div className="flex-grow">
          <FormBox title={t('holidayList')} alt={true}>
            <ul className="list-inside list-disc px-4">
              {holidayList.map((holiday, index) => (
                <li key={index} className="font-body py-2 text-surface dark:text-surface-dark text-lg/loose">{t(holiday.date)} - {t(holiday.name)}</li>
              ))}
            </ul>
          </FormBox>
        </div>
        <div className="flex-grow">
          <FormBox title={t('information')}>
            <ul className="list-inside list-disc px-4">
              {
                Object.keys(userInformation).map((key, index) => (
                  <li key={index} className="font-body py-2 text-surface-dark dark:text-surface text-lg/loose">{t(key)}: {t(userInformation[key])}</li>
                ))
              }
            </ul>
          </FormBox>
        </div>
      </div>
      <div className="basis-2/3">
        <div className="h-full">
          <FormBox title={t('notifications')}>
            <ul className="list-inside list-disc px-4">
              {homePageNotifications.map((notification, index) => (
                <li key={index} className="font-body py-2 text-surface-dark dark:text-surface text-lg/relaxed">{t(notification)}</li>
              ))}
            </ul>
          </FormBox>
        </div>
      </div>
    </div>
  );
}

export default Home;