import { Surface } from '@/ui/Surface';
import { Container } from '@/ui/Container';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';
import { Link } from '@/ui/Link';
import { Box } from '@/ui/Box';
import { BrandMark } from '@/ui/BrandMark';

export interface GlobalFooterViewData {}

export function GlobalFooterTemplate(_props: GlobalFooterViewData) {
  return (
    <Surface as="footer" variant="muted" borderTop paddingY={6}>
      <Container size="full">
        <Box display="flex" flexDirection={{ base: 'col', md: 'row' }} alignItems="center" justifyContent="between" gap={4}>
          
          {/* Left: Identity */}
          <Stack direction="row" align="center" gap={3}>
            <BrandMark />
            <Text size="xs" variant="low" font="mono" uppercase letterSpacing="wider">
              // Infrastructure
            </Text>
          </Stack>

          {/* Center: Technical Links */}
          <Stack direction="row" gap={6} display={{ base: 'none', md: 'flex' }}>
             <Link href="/leagues" variant="secondary" size="xs" underline="none">LEAGUES</Link>
             <Link href="/teams" variant="secondary" size="xs" underline="none">TEAMS</Link>
             <Link href="/docs" variant="secondary" size="xs" underline="none">DOCUMENTATION</Link>
          </Stack>

          {/* Right: System Status */}
          <Stack direction="row" align="center" gap={4}>
            <Box display="flex" alignItems="center" gap={2}>
               <Box w="6px" h="6px" rounded="full" bg="var(--ui-color-intent-success)" animate="pulse" />
               <Text size="xs" variant="low" font="mono">SYSTEM NOMINAL</Text>
            </Box>
            <Text size="xs" variant="low" font="mono">v1.0.0</Text>
          </Stack>

        </Box>
      </Container>
    </Surface>
  );
}