import { Group, Stack, ThemeIcon, Text } from "@mantine/core";
import { Tournament } from "../../types";
import { CalendarIcon, MapPinIcon, TrophyIcon } from "@phosphor-icons/react";
import { useMemo } from "react";
import { Trans, useLingui } from "@lingui/react/macro";
import GlitchAvatar from "@/components/glitch-avatar";

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

  return (
    <Group px="md" gap="md" wrap="nowrap" align="center">
      <GlitchAvatar
        name={tournament.name}
        src={
          tournament.logo
            ? `/api/files/tournaments/${tournament.id}/${tournament.logo}`
            : undefined
        }
        glitchSrc={
          tournament.glitch_logo
            ? `/api/files/tournaments/${tournament.id}/${tournament.glitch_logo}`
            : undefined
        }
        radius="md"
        size={64}
      >
        <TrophyIcon size={24} />
      </GlitchAvatar>
      <Stack gap={6} style={{ minWidth: 0 }}>
        {tournament.location && (
          <Group gap="xs" wrap="nowrap">
            <ThemeIcon size="sm" variant="light" radius="sm">
              <MapPinIcon size={14} />
            </ThemeIcon>
            <Text size="sm" c="dimmed" lineClamp={1}>
              {tournament.location}
            </Text>
          </Group>
        )}

        <Group gap="xs" wrap="nowrap">
          <ThemeIcon size="sm" variant="light" radius="sm">
            <CalendarIcon size={14} />
          </ThemeIcon>
          <Text size="sm" c="dimmed" lineClamp={1}>
            <Trans>
              {tournamentStart.toLocaleDateString(i18n.locale, {
                weekday: "short",
                month: "short",
                day: "numeric",
              })}{" "}
              at{" "}
              {tournamentStart.toLocaleTimeString(i18n.locale, {
                hour: "2-digit",
                minute: "2-digit",
              })}
            </Trans>
          </Text>
        </Group>
      </Stack>
    </Group>
  );
};

export default Header;
