import { css } from "@linaria/core";
import { Space } from "ant-design-vue";
import { defineComponent } from "vue";
import Menu from "./Menu";

export default defineComponent(() => {
  return () => (
    <div class={HeaderLayout}>
      <div class={"lay_top flex align-center justify-between"}>
        <div>立足四川、面向全国，贴近行业，服务社会。</div>
        <div>
          <Space size={50}>
            <a>西华首页</a>
            <a>校友空间</a>
            <a>师生作品</a>
            <a>资料下载</a>
          </Space>
        </div>
      </div>
      <div class={"lay_menu flex"}>
        <div class={"menu_logo"}>
          <router-link to="/">
            <img src={getImageUrl("logo_header.png")} />
          </router-link>
        </div>
        <div class={"menu flex-1"}>
          <Menu />
        </div>
      </div>
    </div>
  );
});
const HeaderLayout = css`
  .lay_top {
    padding: 10px 30px;
    background: #242424;
    color: var(--vt-c-white);

    a {
      color: var(--vt-c-white);
      &:hover {
        text-decoration: underline;
      }
    }
  }
  .lay_menu {
    padding: 22px 30px;
    background: var(--vt-c-primary);
    .menu_logo {
      img {
        height: 54px;
        object-fit: contain;
      }
    }
    .menu {
      padding-left: 50px;
    }
  }
`;
