import { Flex, Title } from "@mantine/core";
import Avatar from "@/components/avatar";
import { Team } from "../../types";

interface HeaderProps {
  name: string;
  logo?: string;
  id?: string;
}

const Header = ({ name, logo, id }: HeaderProps) => {
  return (
    <>
      <Flex h="20dvh" px="xl" w="100%" align="self-end" gap="md">
        <Avatar
          radius="sm"
          name={name}
          size={125}
          src={logo && id ? `/api/files/teams/${id}/${logo}` : undefined}
        />
        <Flex align="center" justify="center" gap={4} pb={20} w="100%">
          <Title ta="center" order={name.length > 25 ? 2 : 1}>
            {name}
          </Title>
        </Flex>
      </Flex>
    </>
  );
};

export default Header;