import { Anchor, Box, Group, Stack } from "@mantine/core";
import { CaretRightIcon } from "@phosphor-icons/react";
import { useNavigate } from "@tanstack/react-router";
import MatchCard from "@/features/matches/components/match-card";
import { Match } from "@/features/matches/types";
import SectionHeading from "./section-heading";

interface RecentResultsProps {
  /** Ended matches, already sorted most-recent-first. */
  matches: Match[];
  tournamentId: string;
  /** How many to show inline before offering "View all results". */
  max?: number;
}

/**
 * Recently finished matches, newest on top, so people can look back and react
 * (each MatchCard carries its own reaction bar). Caps the inline list and links
 * to the full bracket when there are more results than fit.
 */
const RecentResults = ({ matches, tournamentId, max = 5 }: RecentResultsProps) => {
  const navigate = useNavigate();

  if (matches.length === 0) return null;

  const shown = matches.slice(0, max);
  const hasMore = matches.length > max;

  return (
    <Box>
      <SectionHeading
        label="Recently finished"
        action={
          hasMore ? (
            <Anchor
              component="button"
              type="button"
              size="xs"
              fw={600}
              onClick={() =>
                navigate({ to: `/tournaments/${tournamentId}/bracket` })
              }
            >
              <Group gap={2} align="center" wrap="nowrap">
                View all results
                <CaretRightIcon size={12} weight="bold" />
              </Group>
            </Anchor>
          ) : undefined
        }
      />
      <Stack gap="sm" px="md">
        {shown.map((match) => (
          <MatchCard key={match.id} match={match} />
        ))}
      </Stack>
    </Box>
  );
};

export default RecentResults;