import Link from "next/link";
import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar";
import useProfile from "@/lib/hooks/useProfile";
import { nip19 } from "nostr-tools";
import { getTwoLetters, getNameToShow } from "@/lib/utils";
import { Skeleton } from "@/components/ui/skeleton";
import { HiMiniChevronRight, HiCheckBadge } from "react-icons/hi2";

type ProfileInfoProps = {
  pubkey: string;
};
export default function ProfileInfo({ pubkey }: ProfileInfoProps) {
  const { profile } = useProfile(pubkey);
  const npub = nip19.npubEncode(pubkey);
  return (
    <Link
      href={`/${npub}`}
      className="center group gap-x-2 rounded-sm rounded-r-full border bg-background/50 pl-0.5 pr-1 text-muted-foreground hover:shadow"
    >
      <Avatar className="center h-[16px] w-[16px] overflow-hidden rounded-[.25rem] bg-muted @sm:h-[18px] @sm:w-[18px]">
        <AvatarImage src={profile?.image} alt={profile?.displayName} />
        <AvatarFallback className="text-[8px]">
          {getTwoLetters({ npub, profile })}
        </AvatarFallback>
      </Avatar>
      <div className="flex items-center gap-1">
        <span className="text-[14px] ">{getNameToShow({ npub, profile })}</span>
        {!!profile?.nip05 && <HiCheckBadge className="h-3 w-3 text-primary" />}
      </div>
      <HiMiniChevronRight className="h-4 w-4" />
    </Link>
  );
}

export function LoadingProfileInfo() {
  return (
    <div className="center group gap-x-1">
      <Avatar className="center h-[16px] w-[16px] overflow-hidden rounded-[.25rem] bg-muted @sm:h-[18px] @sm:w-[18px]"></Avatar>
      <div className="space-y-1">
        <Skeleton className="h-2 w-[70px] bg-muted" />
      </div>
    </div>
  );
}