import { Pressable, Text } from "react-native";
import { Avatar, AvatarFallback } from "../ui/avatar";
import { ChevronDown } from "lucide-react-native";

export function HeaderRightButton({
  title,
  onPress,
  showAvatar,
}: {
  title: string;
  onPress?(): void;
  showAvatar?: boolean;
}) {
  const initials = title
    .split(" ")
    .map((word) => word[0])
    .join("")
    .slice(0, 2)
    .toUpperCase();
  return (
    <>
      <Pressable
        onPress={onPress}
        className="mr-4 w-4/6 flex-row items-center rounded-full border-2 border-gray-100 px-3 py-2 active:bg-gray-50"
      >
        {showAvatar && (
          <Avatar className={`mr-2 size-6 bg-blue-200`} alt={initials}>
            <AvatarFallback className="bg-blue-400">
              <Text className="text-xs font-semibold text-white">
                {initials}
              </Text>
            </AvatarFallback>
          </Avatar>
        )}
        <Text
          className="flex-1 text-xs font-medium text-gray-700"
          numberOfLines={2}
          ellipsizeMode="tail"
        >
          {title}
        </Text>
        <ChevronDown size={12} className="ml-1 text-gray-600" />
      </Pressable>
    </>
  );
}