"use client";

import { Avatar, Button, Layout, Space, Typography } from "antd";

import { useAuth } from "@/lib/hooks/use-auth";

const { Header } = Layout;
const { Text } = Typography;

export function AppHeader() {
  const auth = useAuth();
  const user = auth.user;
  const initial = user?.name ? user.name.charAt(0).toUpperCase() : undefined;

  return (
    <Header
      style={{
        background: "#fff",
        padding: "0 24px",
        display: "flex",
        alignItems: "center",
        justifyContent: "space-between",
        borderBottom: "1px solid #f0f0f0",
      }}
    >
      <span />
      <Space>
        <Avatar src={user?.avatar} alt={user?.name}>
          {initial}
        </Avatar>
        <div style={{ display: "flex", flexDirection: "column" }}>
          <Text strong>{user?.name ?? "Loading"}</Text>
          <Text type="secondary" style={{ fontSize: 12 }}>
            {user?.email ?? "--"}
          </Text>
        </div>
        <Button onClick={auth.logout}>Sign out</Button>
      </Space>
    </Header>
  );
}