import { Flex, Text } from "@mantine/core";
import React from "react";
import { CrownIcon } from "@phosphor-icons/react";
import { SeedBadge } from "./seed-badge";
import { TeamInfo } from "@/features/teams/types";

interface MatchSlotProps {
  from?: number;
  from_loser?: boolean;
  team?: TeamInfo;
  seed?: number;
  cups?: number;
  isWinner?: boolean;
}

export const MatchSlot: React.FC<MatchSlotProps> = ({
  from,
  from_loser,
  team,
  seed,
  cups,
  isWinner
}) => (
  <Flex
    align="stretch"
    style={{
      backgroundColor: isWinner ? 'var(--mantine-color-green-light)' : 'transparent',
      borderRadius: 'var(--mantine-radius-sm)',
      transition: 'background-color 200ms ease',
    }}
  >
    {(seed && seed > 0) ? <SeedBadge seed={seed} /> : undefined}
    <Flex p="6px 10px" w='100%' align="center">
      <Flex align="center" gap={4} flex={1}>
        {team ? (
          <>
            <Text 
              size={team.name.length > 12 ? (team.name.length > 18 ? '10px' : '11px') : 'xs'}
              truncate
              style={{ minWidth: 0, flex: 1, lineHeight: "12px" }}
            >
              {team.name}
            </Text>
            {isWinner && (
              <CrownIcon
                size={14} 
                weight="fill"
                style={{ 
                  color: 'gold',
                  marginLeft: '2px',
                  marginTop: '-1px',
                  filter: 'drop-shadow(0 1px 1px rgba(0,0,0,0.3))',
                  flexShrink: 0
                }} 
              />
            )}
          </>
        ) : from ? (
          <Text c="dimmed" size="xs" truncate style={{ minWidth: 0, flex: 1 }}>
            {from_loser ? "Loser" : "Winner"} of Match {from}
          </Text>
        ) : (
          <Text c="dimmed" size="xs" truncate style={{ minWidth: 0, flex: 1 }}>
            TBD
          </Text>
        )}
      </Flex>
      {
        cups !== undefined ? (
          <Text ta='center' w={15} fw="800" ml={4} size="xs">{cups}</Text>
        ) : undefined
      }
    </Flex>
  </Flex>
);