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

import { UserLoginLog } from "@/store/api/usersApi";
import { formatDate, formatTime } from "@/utils/dateUtils";

interface MobileLogsTableProps {
  logs: UserLoginLog[];
}

export const MobileLogsTable = ({ logs }: MobileLogsTableProps) => {
  return (
    <View className="flex-1">
      <ScrollView
        className="flex-1"
        contentContainerStyle={{ paddingBottom: 16 }}
      >
        {logs.map((log) => (
          <View key={log.id} className="mb-3 p-4 bg-white rounded-md shadow-sm">
            <Text className="text-base font-semibold">
              {log.name}{" "}
              <Text className="font-normal text-gray-600">({log.email})</Text>
            </Text>
            <Text className="text-sm text-gray-700 mt-1">
              Time: {formatDate(log.lastLoginAt)} {formatTime(log.lastLoginAt)}
            </Text>
            <Text className="text-sm text-gray-700 mt-1">
              Login activity: {log.activity}
            </Text>
          </View>
        ))}
      </ScrollView>
    </View>
  );
};