"use client";
import TitleCard from "@/components/TitleCard/TitleCard";
import { useAuthStore } from "@/zustand/auth/useAuthStore";
import React, { useState } from "react";
import Button from "@/components/ui/Button";
import Modal from "@/components/ui/Modal";
import { getClientDictionary } from "@/utils/getClientDictionary";
import { SettingsContent } from "@/types/staticContent/settings.content.type";

type Props = {
  children: React.ReactNode;
};

const layout = ({ children }: Props) => {
  const { logout, language } = useAuthStore();
  const [showLogoutModal, setShowLogoutModal] = useState(false);
  const SETTINGS = getClientDictionary(language, 'settings') as SettingsContent;

  return (
    <>
      <TitleCard
        title={SETTINGS.SETTINGS.TITLE}
        description={SETTINGS.SETTINGS.DESCRIPTION}
      />

      <div className="flex flex-col gap-4 md:gap-5 xl:gap-6 2xl:gap-7.5 lg:flex-row items-stretch lg:h-[calc(100dvh-150px)] 2xl:h-[calc(100dvh-175px)]">
        <div className="w-full lg:max-w-75 border border-grey2b rounded-xl p-4 2xl:px-5 2xl:py-8 bg-secondary shrink-0">
          <ul className="flex h-full flex-col gap-2.5 sm:gap-3 lg:gap-4.5 overflow-auto">
            <li className="cursor-pointer bg-secondary27 text-primary font-medium p-4 rounded-xl">
              {SETTINGS.SETTINGS.PROFILE.TITLE}
            </li>

            <li
              className="cursor-pointer text-light hover:text-primary font-medium p-4 rounded-xl"
              onClick={() => setShowLogoutModal(true)}
            >
              {SETTINGS.SETTINGS.LOGOUT}
            </li>
          </ul>
        </div>

        <div className="border border-grey2b rounded-xl p-4 2xl:p-8 bg-secondary w-full">
          <div className="h-full overflow-auto">{children}</div>
        </div>
      </div>

      {/* Logout Confirmation Modal */}
      <Modal
        open={showLogoutModal}
        onClose={() => setShowLogoutModal(false)}
        title={SETTINGS.SETTINGS.LOGOUT}
        footer={
          <>
            <Button
              variant="border-primary"
              onClick={() => setShowLogoutModal(false)}
            >
              {SETTINGS.SETTINGS.CANCEL}
            </Button>
            <Button
              onClick={() => {
                setShowLogoutModal(false);
                logout();
              }}
            >
              {SETTINGS.SETTINGS.LOGOUT}
            </Button>
          </>
        }
      >
        <p className="text-center text-base xl:text-lg font-medium text-grey92">
          {SETTINGS.SETTINGS.CONFIRM_LOGOUT}
        </p>
      </Modal>
    </>
  );
};

export default layout;