import React from 'react';
import { Flex, Text, Button, Separator, Box, Badge } from '@radix-ui/themes';

export default function TablePlaceholder() {
  return (
    <Flex direction="column" gap="3" p="4">
      <Flex justify="between" align="center">
        <Text weight="bold">Proxy Hosts</Text>
        <Button size="1">Add Host</Button>
      </Flex>
      <Separator size="4" />
      {[1, 2, 3].map((i) => (
        <Flex key={i} justify="between" align="center">
          <Box>
            <Text size="2" weight="bold" as="div">
              {`host-${i}.example.com`}
            </Text>
            <Text size="1" color="gray">
              {`http://10.0.0.${i}:8080`}
            </Text>
          </Box>
          <Badge color="green">Online</Badge>
        </Flex>
      ))}
    </Flex>
  );
}