import { Group, Stack, ThemeIcon, Text, Flex } from "@mantine/core";
import { Tournament } from "../../types";
import Avatar from "@/components/avatar";
import {
  CalendarIcon,
  MapPinIcon,
  TrophyIcon,
  UsersIcon,
} from "@phosphor-icons/react";
import { useMemo } from "react";

const Header = ({ tournament }: { tournament: Tournament }) => {
  const tournamentStart = useMemo(
    () => new Date(tournament.start_time),
    [tournament.start_time]
  );

  return (
    <Stack align="center" gap={0}>
      <Avatar
        name={tournament.name}
        contain
        src={
          tournament.logo
            ? `/api/files/tournaments/${tournament.id}/${tournament.logo}`
            : undefined
        }
        radius="md"
        size={300}
        px="xs"
        withBorder={false}
      >
        <TrophyIcon size={32} />
      </Avatar>
      <Flex gap="xs" direction="column" justify="space-around">
        {tournament.location && (
          <Group gap="xs">
            <ThemeIcon size="sm" variant="light" radius="sm">
              <MapPinIcon size={14} />
            </ThemeIcon>
            <Text size="sm" c="dimmed">
              {tournament.location}
            </Text>
          </Group>
        )}

        <Group gap="xs">
          <ThemeIcon size="sm" variant="light" radius="sm">
            <CalendarIcon size={14} />
          </ThemeIcon>
          <Text size="sm" c="dimmed">
            {tournamentStart.toLocaleDateString(undefined, {
              weekday: "short",
              month: "short",
              day: "numeric",
            })}{" "}
            at{" "}
            {tournamentStart.toLocaleTimeString([], {
              hour: "2-digit",
              minute: "2-digit",
            })}
          </Text>
        </Group>
      </Flex>
    </Stack>
  );
};

export default Header;