import { useContext } from "preact/hooks";
import { Pb } from "../../EspaceMembres"
import type { UsersRecord } from "../../../types/pb_types";

export default function User() {
  const pb = useContext(Pb);
  const {firstname, lastname, avatar}: UsersRecord = pb.authStore.model || {};
  const {id} = pb.authStore.model || {};
  const avatarUrl = import.meta.env.PUBLIC_PB_API + `/api/files/_pb_users_auth_/${id}/${avatar}?thumb=100x100`;

  return (
    <div className="flex items-center p-4 border-b-2 border-gray-200 max-h-[6rem]">
      <img src={avatarUrl} alt="Profile" className="rounded-full border-2 border-gray-200 h-full" />
      <p className="ml-2 text-center flex-grow capitalize">{firstname} {lastname}</p>
    </div>
  )
}
