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

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

interface LoginListItemProps {
  log: UserLoginLog;
}

export const LoginListItem = ({ log }: LoginListItemProps) => {
  const isSuccess = log.status === "SUCCESS";
  const isFailure = log.status === "FAILURE";

  return (
    <View className="bg-white rounded-lg p-1 mb-3 shadow-sm">
      <View className="flex-row items-center">
        <Text
          className="text-sm font-medium text-gray-700 flex-1"
          numberOfLines={1}
          ellipsizeMode="tail"
        >
          {formatDate(log.lastLoginAt)} -{" "}
          {formatTimeWithSeconds(log.lastLoginAt)} {" | "}
          <Text
            style={{
              color: isSuccess ? "#22C927" : "#F83434",
              fontWeight: "bold",
            }}
          >
            {isSuccess
              ? log.activity
              : reasonLabel(log.failureReason) || "Failed"}
          </Text>
        </Text>
      </View>
    </View>
  );
};