import {Avatar, Dropdown, Layout, Nav} from "@douyinfe/semi-ui"
import React from "react";

import {AppLogo} from "@/assets/AppLogo.tsx";

const {Header, Footer, Content} = Layout;

export const HeaderUserAvatar = () => {
    return (<Dropdown
        position={'bottomRight'}
        render={
            <Dropdown.Menu>
                <Dropdown.Item>个人资料</Dropdown.Item>
                <Dropdown.Item>更新密码</Dropdown.Item>
                <Dropdown.Divider/>
                <Dropdown.Item>退出</Dropdown.Item>
            </Dropdown.Menu>
        }
    >
        <Avatar color="orange" size="small">YJ</Avatar>
    </Dropdown>)
}
type CommonHeaderProps = {
    children?: React.ReactNode;
    title?: React.ReactNode;
    rightExtra?: React.ReactNode;
}
export const CommonHeader: React.FC<CommonHeaderProps> = ({children, title, rightExtra}) => {

    return (<Header style={{backgroundColor: 'var(--semi-color-bg-1)', position: 'sticky', top: 0, zIndex: 100}}>
        <div>
            <Nav mode="horizontal" defaultSelectedKeys={['Home']}>
                <Nav.Header>
                    <AppLogo style={{fontSize: 36}}/>
                </Nav.Header>
                <div className={'align-center'} style={{color: 'var(--semi-color-text-2)',}}>
                    <span
                        style={{
                            marginRight: '24px',
                            color: 'var(--semi-color-text-0)',
                            fontWeight: '600',
                            fontSize: '1.2em'
                        }}
                    >{title}</span>
                    {children}
                </div>
                <Nav.Footer>
                    {rightExtra}

                    <HeaderUserAvatar/>
                </Nav.Footer>
            </Nav>
        </div>
    </Header>)
}


type LayoutProps = {
    header: React.ReactNode
    children: React.ReactNode
}
export const BaseLayout: React.FC<LayoutProps> = ({children, header}) => {
    return (<Layout>
        {header}
        <Content style={{padding: '15px', backgroundColor: 'var(--semi-color-fill-0,#fafafa)',}}>
            {children}
        </Content>
        <Footer
            style={{
                textAlign: 'center',
                padding: '20px',
                color: 'var(--semi-color-text-2)',
                backgroundColor: 'rgba(var(--semi-color-bg-0), 1)',
            }}
        >
            <span>Copyright © 2024 星图比特. All Rights Reserved. </span>
        </Footer>
    </Layout>)
}