import React from 'react';

export interface User { id: string; name: string; avatar: string }

// TODO: UserContext + UserProvider 를 만들어서 중간 컴포넌트의 user prop 을 제거하세요.
//       App 컴포넌트의 시그니처는 변경 가능하지만, App 은 user 를 받지 않고
//       useCurrentUser stub 또는 props 를 사용하는 형태로.

export function App({ user }: { user: User }) {
  return <Page user={user} />;
}

function Page({ user }: { user: User }) {
  return (
    <Layout user={user}>
      <Content user={user} />
    </Layout>
  );
}

function Layout({ user, children }: { user: User; children: React.ReactNode }) {
  return (
    <div>
      <Header user={user} />
      <Sidebar user={user} />
      {children}
    </div>
  );
}

function Header({ user }: { user: User }) {
  return <header><UserMenu user={user} /></header>;
}

function Sidebar({ user }: { user: User }) {
  return <aside><Avatar user={user} /></aside>;
}

function Content({ user }: { user: User }) {
  return <main><UserProfile user={user} /></main>;
}

function Avatar({ user }: { user: User }) {
  return <img data-testid="avatar" src={user.avatar} alt={user.name} />;
}

function UserMenu({ user }: { user: User }) {
  return <div data-testid="menu">Welcome, {user.name}</div>;
}

function UserProfile({ user }: { user: User }) {
  return <div data-testid="profile">{user.name}'s Profile</div>;
}