import { View, Text } from "react-native";

import { User } from "@/store/models/User.model";
import { useGetUserLogsByIdQuery } from "@/store/api/usersApi";
import { LoginListItem } from "@/components/features/accounts/LoginListItem";

interface PersonalLoginListProps {
  user: User;
}

export const PersonalLoginList = ({ user }: PersonalLoginListProps) => {
  const { data, isLoading, isError } = useGetUserLogsByIdQuery(
    { userId: user.id, page: 1, limit: 10 },
    { skip: !user?.id }
  );

  const items = data?.items ?? [];

  return (
    <View className="bg-lightGray rounded-md">
      <Text className="font-medium mb-4 mt-0 text-gray-600">Log-in List:</Text>
      {isLoading ? (
        <Text className="text-black">Loading...</Text>
      ) : isError ? (
        <Text className="text-black">-</Text>
      ) : items.length === 0 ? (
        <Text className="font-medium text-black">No logins history</Text>
      ) : (
        <View style={{ gap: 8 }}>
          {items.map((log, idx) => (
            <LoginListItem key={`${log.id}-${idx}`} log={log} />
          ))}
        </View>
      )}
    </View>
  );
};