import { Box } from '@/ui/Box';
import { Stack } from '@/ui/Stack';
import { Surface } from '@/ui/Surface';
import { Text } from '@/ui/Text';
import { ViewData } from '@/lib/contracts/view-data/ViewData';

export interface GlobalFooterViewData extends ViewData {}

export function GlobalFooterTemplate(_props: GlobalFooterViewData) {
  return (
    <Surface
      as="footer"
      variant="precision"
      paddingY={3}
      paddingX={4}
      borderTop={true}
      backgroundColor="rgba(10, 10, 11, 0.92)"
      className="backdrop-blur-xl"
      style={{
        boxShadow: '0 -1px 0 0 rgba(255, 255, 255, 0.05)',
      }}
    >
      <Box display="flex" justifyContent="between" alignItems="center" width="full" gap={4}>
        <Stack direction="row" align="center" gap={3}>
          <Text size="xs" variant="low" font="mono" uppercase letterSpacing="0.12em">
            © {new Date().getFullYear()} GridPilot
          </Text>
          <Box w="1px" h="12px" bg="var(--ui-color-border-muted)" opacity={0.6} />
          <Text size="xs" variant="low" font="mono" uppercase letterSpacing="0.12em">
            Session ready
          </Text>
        </Stack>

        <Box display={{ base: 'none', sm: 'flex' }}>
          <Stack direction="row" align="center" gap={2}>
            <Box w="6px" h="6px" rounded="full" bg="var(--ui-color-intent-success)" />
            <Text size="xs" variant="low" font="mono" uppercase letterSpacing="0.12em">
              Live
            </Text>
          </Stack>
        </Box>
      </Box>
    </Surface>
  );
}