"use client";
import PasswordForm from "@/components/form/settings/password";
import ProfileForm from "@/components/form/settings/profile";
import { close, loading } from "@/config/swal";
import { getProfile } from "@/service/master-user";
import { Tab, Tabs } from "@heroui/react";
import { useEffect, useState } from "react";

export default function Settings() {
  const [profile, setProfile] = useState<any>();
  useEffect(() => {
    initFetch();
  }, []);
  const initFetch = async () => {
    loading();
    const profile = await getProfile();
    setProfile(profile?.data?.data);
    close();
  };
  return (
    <div className="w-full lg:w-[60%] p-3">
      <div className="flex flex-col bg-gray-50 shadow-md dark:bg-stone-900 text-black dark:text-white rounded-md p-5">
        <Tabs aria-label="Tabs radius" radius="sm">
          <Tab key="profile" title="Profile">
            <ProfileForm profile={profile} doFetch={() => initFetch()} />
          </Tab>
          <Tab key="music" title="Password">
            <PasswordForm doFetch={() => initFetch()} />
          </Tab>
        </Tabs>
      </div>
    </div>
  );
}