import { Box, HStack, Image, Text, VStack } from "@chakra-ui/react";

export default function AppHeader() {
  return (
    <Box
      w="100%"
      h="92px"
      borderBottom="1px solid"
      borderColor="gray.200"
      bg="#fdfbff"
      as={HStack}
      alignItems="center"
      justifyContent="space-between"
      px={"20px"}
      zIndex={10}
      position="fixed"
      top={0}
    >
      <HStack alignItems={"end"} height={"100%"} py={"10px"}>
        <Image
          src="/generative-logo.png"
          w={"80px"}
          h={"70px"}
          loading="lazy"
        />
        <VStack alignItems={"start"} justifyContent={"end"} height={"100%"}>
          <Text fontWeight={"bold"} fontSize={"20px"}>
            سامانه تولید محتوای هوشمند
          </Text>
          <Text>
            سامانه جامع تولید محتوا با استفاده از مدل‌های زبانی و مولد تصویر و
            ویدئو
          </Text>
        </VStack>
      </HStack>
      <VStack
        w={"fit-content"}
        alignItems={"center"}
        justifyContent={"center"}
        py={"10px"}
      >
        <Image src="./logob.png" />
        <Text fontSize="xs" fontWeight="bold">
          موسسه تولید سیستم های خبره و هوشمند اسلامی باقرالعلوم(ع)
        </Text>
      </VStack>
    </Box>
  );
}