import React from "react";
import { View } from "react-native";
import { useColorScheme } from "nativewind";
import { cn } from "../utils/cn";
import { useAuth } from "../hooks/useAuth";
import { Text } from "./text";

export interface UserAvatarProps {
  /** Square pixel size. Defaults to 36. */
  size?: number;
  /**
   * Override for the initial letter. By default the avatar pulls the
   * first character of `display_name`, falling back to `username`, then
   * `email`, then `?`.
   */
  initial?: string;
}

/**
 * Initial-letter circular avatar. Pulls the current user from
 * `useAuth()` and renders a foreground-on-primary disc. Apps that want
 * a static initial (e.g. an icon strip) pass `initial` explicitly.
 */
export const UserAvatar = React.memo(function UserAvatar({ size = 36, initial }: UserAvatarProps) {
  const { user } = useAuth();
  const { colorScheme } = useColorScheme();
  const isDark = colorScheme === "dark";
  const resolved =
    initial ??
    (user?.display_name || user?.username || user?.email || "?")[0]?.toUpperCase() ??
    "?";

  return (
    <View
      className={cn("items-center justify-center rounded-full", isDark ? "bg-white" : "bg-black")}
      style={{ width: size, height: size }}
    >
      <Text
        className="font-bold"
        style={{ fontSize: size * 0.44, color: isDark ? "#000000" : "#FFFFFF" }}
      >
        {resolved}
      </Text>
    </View>
  );
});