import { Divider } from "react-native-paper";

import { User } from "@/store/models/User.model";
import { PersonalInfo } from "@/components/features/accounts/PersonalInfo";
import { PersonalMetrics } from "@/components/features/accounts/PersonalMetrics";
import { PersonalTodoList } from "@/components/features/accounts/PersonalTodoList";
import { PersonalLoginList } from "@/components/features/accounts/PersonalLoginList";
import { PersonalActions } from "@/components/features/accounts/PersonalActions";
import { useAppSelector } from "@/store/hooks";
import { selectIsMobile } from "@/store/screen/screenSizeSlice";

interface AccountDetailsProps {
  user: User;
  isLoading: boolean;
}

const backgroundStyle = {
  height: 6,
  backgroundColor: "#C4BEBE",
};

export const AccountDetails = ({ user, isLoading }: AccountDetailsProps) => {
  const isMobile = useAppSelector(selectIsMobile);

  return (
    <>
      <PersonalActions user={user} isLoading={isLoading} />
      <Divider style={backgroundStyle} className={isMobile ? "my-1" : "my-4"} />

      <PersonalInfo user={user} manager={user.manager} />
      <Divider style={backgroundStyle} className={isMobile ? "my-1" : "my-4"} />

      <PersonalMetrics user={user} />
      <Divider style={backgroundStyle} className={isMobile ? "my-1" : "my-4"} />

      <PersonalTodoList user={user} />
      <Divider style={backgroundStyle} className={isMobile ? "my-1" : "my-4"} />

      <PersonalLoginList user={user} />
    </>
  );
};