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

interface HeaderProps {
  tournament: Tournament;
}

const Header = ({ tournament }: HeaderProps) => {

  return (
    <>
      <Flex h="20dvh" px='xl' w='100%' align='self-end' gap='md'>
        <Avatar contain name={tournament.name} radius={0} withBorder={false} size={150} src={`/api/files/tournaments/${tournament.id}/${tournament.logo}`} />
        <Flex align='center' justify='center' gap={4} pb={20} w='100%'>
          <Title ta='center' order={2}>{tournament.name}</Title>
        </Flex>
      </Flex>
    </>
  )
};

export default Header;