import React from 'react';

export interface User { id: string; name: string }
export interface Notification { id: string; message: string; read: boolean }
export interface DashboardData { metrics: { name: string; value: number }[] }

// TODO: 세 도메인(User/Notifications/DashboardData) 별로 Context 를 만들어
//       중간 컴포넌트의 prop 을 제거하세요.

export function DashboardLayout({
  user,
  notifications,
  data,
}: {
  user: User;
  notifications: Notification[];
  data: DashboardData;
}) {
  return (
    <div>
      <Header user={user} notifications={notifications} />
      <Main user={user} data={data} />
    </div>
  );
}

function Header({ user, notifications }: { user: User; notifications: Notification[] }) {
  return (
    <header>
      <UserMenu user={user} />
      <NotificationsBell notifications={notifications} />
    </header>
  );
}

function NotificationsBell({ notifications }: { notifications: Notification[] }) {
  const unread = notifications.filter((n) => !n.read).length;
  return <span data-testid="bell">{unread}</span>;
}

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

function Main({ user, data }: { user: User; data: DashboardData }) {
  return (
    <main>
      <Greeting user={user} />
      <Metrics data={data} />
    </main>
  );
}

function Greeting({ user }: { user: User }) {
  return <h2 data-testid="greeting">Welcome, {user.name}!</h2>;
}

function Metrics({ data }: { data: DashboardData }) {
  return (
    <ul data-testid="metrics">
      {data.metrics.map((m) => (
        <li key={m.name}>
          {m.name}: {m.value}
        </li>
      ))}
    </ul>
  );
}