import { User } from "lucide-react-native";
import React from "react";
import { View, Text, Image, TouchableOpacity } from "react-native";
import { useTranslation } from "react-i18next";
import { Contact } from "~/lib/stores";

interface ProfileCardProps {
  contact?: Contact;
  onPress?: () => void;
}

export default function ProfileCard({ contact, onPress }: ProfileCardProps) {
  const { t } = useTranslation();

  if (!contact) {
    return (
      <View className="flex flex-col items-left space-y-2 mt-3">
        <View className="bg-orange-50 rounded-lg p-5">
          <User className="text-orange-400" size={24} />
        </View>
        <Text className="text-primary font-dmsans-medium text-sm">
          {t("components.profilecard.emptyLabelContact")}
        </Text>
      </View>
    );
  }

  const displayName =
    contact.firstName ||
    contact.name ||
    t("components.profilecard.unknownContact");
  const initials = displayName
    .split(" ")
    .map((n) => n[0])
    .join("")
    .toUpperCase()
    .substring(0, 2);

  return (
    <TouchableOpacity onPress={onPress} activeOpacity={0.7}>
      <View className="flex flex-col items-center space-y-2 mt-3 mx-[5px]">
        <View className="bg-primary/10 rounded-lg p-4 w-24 h-24 flex items-center justify-center">
          {contact.imageAvailable && contact.image ? (
            <Image
              source={{ uri: contact.image.uri }}
              className="w-12 h-12 rounded-lg"
              resizeMode="cover"
            />
          ) : (
            <View className="w-16 h-16 rounded-lg bg-primary/20 flex items-center justify-center">
              <Text className="text-primary font-dmsans-bold text-sm">
                {initials}
              </Text>
            </View>
          )}
        </View>
        <Text
          className="text-primary font-dmsans-medium pt-2 text-sm text-center max-w-[60px]"
          numberOfLines={1}
          ellipsizeMode="tail"
        >
          {displayName}
        </Text>
      </View>
    </TouchableOpacity>
  );
}