import { Trophy } from 'lucide-react';
import { ReactNode } from 'react';
import { Box } from './Box';
import { Heading } from './Heading';
import { Icon } from './Icon';
import { Stack } from './Stack';
import { Text } from './Text';

interface PodiumProps {
  title: string;
  children: ReactNode;
}

export function Podium({ title, children }: PodiumProps) {
  return (
    <Box bg="bg-iron-gray/50" rounded="2xl" border style={{ borderColor: 'rgba(38, 38, 38, 0.8)' }} p={8} mb={10}>
      <Box display="flex" justifyContent="center" mb={8}>
        <Stack direction="row" align="center" gap={2}>
          <Icon icon={Trophy} size={6} color="var(--warning-amber)" />
          <Heading level={2}>{title}</Heading>
        </Stack>
      </Box>

      <Stack direction="row" align="end" justify="center" gap={8}>
        {children}
      </Stack>
    </Box>
  );
}

interface PodiumItemProps {
  position: number;
  height: string;
  cardContent: ReactNode;
  bgColor: string;
  positionColor: string;
}

export function PodiumItem({
  position,
  height,
  cardContent,
  bgColor,
  positionColor,
}: PodiumItemProps) {
  return (
    <Stack align="center">
      {cardContent}

      {/* Podium stand */}
      <Box
        bg={bgColor}
        h={height}
        border
        style={{ borderColor: 'rgba(38, 38, 38, 0.8)', borderTopLeftRadius: '0.5rem', borderTopRightRadius: '0.5rem' }}
        w="28"
        display="flex"
        p={3}
      >
        <Box display="flex" center fullWidth>
          <Text size="3xl" weight="bold" color={positionColor as any}>
            {position}
          </Text>
        </Box>
      </Box>
    </Stack>
  );
}