import React from 'react';
import { Layout, Typography, Dropdown, Avatar, Space } from 'antd';
import { UserOutlined, LogoutOutlined } from '@ant-design/icons';
import type { MenuProps } from 'antd';
import { useStore } from '../../store';

const { Header } = Layout;

export const TopNav: React.FC = () => {
  const user = useStore((s) => s.user);
  const logout = useStore((s) => s.logout);

  const menuItems: MenuProps['items'] = [
    {
      key: 'logout',
      icon: <LogoutOutlined />,
      label: 'Sign out',
      onClick: logout,
    },
  ];

  return (
    <Header
      style={{
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between',
        padding: '0 16px',
        background: '#001529',
        height: 48,
        lineHeight: '48px',
      }}
    >
      <Typography.Text strong style={{ color: '#fff', fontSize: 16 }}>
        mRemotify
      </Typography.Text>

      <Dropdown menu={{ items: menuItems }} placement="bottomRight" arrow>
        <Space style={{ cursor: 'pointer', color: '#fff' }}>
          <Avatar size="small" icon={<UserOutlined />} />
          <Typography.Text style={{ color: '#fff' }}>{user?.username}</Typography.Text>
        </Space>
      </Dropdown>
    </Header>
  );
};