import { Trophy, Sparkles, LucideIcon } from 'lucide-react';
import { Heading } from '@/ui/Heading';
import { Button } from '@/ui/Button';
import { Card } from '@/ui/Card';
import { Box } from '@/ui/Box';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';
import { Icon } from '@/ui/Icon';

interface EmptyStateProps {
  title: string;
  description: string;
  icon?: LucideIcon;
  actionIcon?: LucideIcon;
  actionLabel?: string;
  onAction?: () => void;
  children?: React.ReactNode;
  className?: string;
}

export function EmptyState({
  title,
  description,
  icon = Trophy,
  actionIcon = Sparkles,
  actionLabel,
  onAction,
  children,
  className,
}: EmptyStateProps) {
  return (
    <Card className={className}>
      <Box textAlign="center" py={16}>
        <Box maxWidth="md" mx="auto">
          <Box height={16} width={16} mx="auto" display="flex" center rounded="2xl" backgroundColor="primary-blue" opacity={0.1} border borderColor="primary-blue" mb={6}>
            <Icon icon={icon} size={8} color="text-primary-blue" />
          </Box>
          <Box mb={3}>
            <Heading level={2}>
              {title}
            </Heading>
          </Box>
          <Box mb={8}>
            <Text color="text-gray-400">
              {description}
            </Text>
          </Box>
          {children}
          {actionLabel && onAction && (
            <Button
              variant="primary"
              onClick={onAction}
              icon={<Icon icon={actionIcon} size={4} />}
              className="mx-auto"
            >
              {actionLabel}
            </Button>
          )}
        </Box>
      </Box>
    </Card>
  );
}