import { LockIcon, UsersIcon } from "../../../../icons";
import { Avatar, Banner, FormattedNumber } from "../../../atoms";

type PageHeaderProps = {
  bannerImg: string;
  profileImg: string;
  category: string;
  usersCount: number;
};

const PageHeader = ({
  usersCount,
  category,
  bannerImg,
  profileImg,
}: PageHeaderProps) => {
  return (
    <section>
      <Banner img={bannerImg} />
      <div className="mx-64 relative">
        <Avatar
          image={profileImg}
          size="xl"
          className="border-4 border-white absolute top-[-80px]"
        />
        <div className="text-mono-700 flex gap-6 p-6 ml-[160px]">
          <span>Community</span>
          <span className="flex items-center gap-2">
            <LockIcon /> {category}
          </span>
          <span className="flex items-center gap-2">
            <UsersIcon />
            <FormattedNumber value={usersCount} />{" "}members
          </span>
        </div>
      </div>
    </section>
  );
};

export { PageHeader, PageHeaderProps };
