import { useAppContext } from "../../app/AppContext";
import { Button } from "../../components/ui";
import { friends } from "../../data/friends.mock";
import { getFriendStatusLabel } from "./friendStatus";

export function SocialSidebar() {
  const { notify } = useAppContext();

  return (
    <aside className="social-sidebar" aria-label="Friends and social status">
      <header>
        <span className="eyebrow">Social</span>
        <h2>Friends</h2>
      </header>

      <div className="social-list">
        {friends.map((friend) => (
          <article key={friend.id} className="social-card">
            <span className={`status-dot status-${friend.status}`} />
            <div>
              <h3>{friend.displayName}</h3>
              <p>{getFriendStatusLabel(friend.status)}</p>
              <span>{friend.activity}</span>
            </div>
            <Button
              variant="ghost"
              size="sm"
              disabled={friend.status === "offline"}
              onClick={() =>
                notify({
                  title: "Invite sent",
                  message: `${friend.displayName} received a prototype party invite.`,
                  variant: "success"
                })
              }
            >
              Invite
            </Button>
          </article>
        ))}
      </div>
    </aside>
  );
}