import React from 'react';
import { Card } from '@/ui/Card';
import { Button } from '@/ui/Button';
import { Box } from '@/ui/Box';
import { Text } from '@/ui/Text';
import { Heading } from '@/ui/Heading';

export function FeedEmptyState() {
  return (
    <Card bg="bg-iron-gray/80" border={true} borderColor="border-charcoal-outline" className="border-dashed">
      <Box textAlign="center" py={10}>
        <Text size="3xl" block mb={3}>🏁</Text>
        <Box mb={2}>
          <Heading level={3}>
            Your feed is warming up
          </Heading>
        </Box>
        <Box maxWidth="md" mx="auto" mb={4}>
          <Text size="sm" color="text-gray-400">
            As leagues, teams, and friends start racing, this feed will show their latest results,
            signups, and highlights.
          </Text>
        </Box>
        <Button
          as="a"
          href="/leagues"
          variant="secondary"
          size="sm"
        >
          Explore leagues
        </Button>
      </Box>
    </Card>
  );
}