import { h, useProp, Component } from "atomico";
import "../kun-image/kun-image";
import style from "./kun-member-info.scss";
import { getComponentOrDefine } from "../../hooks/aync-hook/redirect";

const KunMemberInfo = () => {
  const [avatar] = useProp<string>("avatar");
  const [nickName] = useProp<string>("nickName");

  return (
    <host>
      <style>{style}</style>
      <div class="flex flex-col member-info w-16 items-center">
        <kun-image cls="kun-image-avatar" className="kun-avatar-dropdown" width={46} height={46} url={avatar} />
        <div class="truncate text-sm p-2 text-center">{nickName}</div>
      </div>
    </host>
  );
};

KunMemberInfo.props = {
  avatar: {
    type: String,
  },
  nickName: {
    type: String,
  },
};

export default getComponentOrDefine("kun-member-info", KunMemberInfo);
