import { Stack, Text, ThemeIcon, Title } from "@mantine/core";
import { ReactNode } from "react";

interface EmptyStateProps {
  icon: ReactNode;
  title: string;
  description?: string;
  action?: ReactNode;
}

const EmptyState = ({ icon, title, description, action }: EmptyStateProps) => {
  return (
    <Stack align="center" gap="md" py="xl">
      <ThemeIcon size="xl" variant="light" radius="md">
        {icon}
      </ThemeIcon>
      <Stack align="center" gap={4}>
        <Title order={3} c="dimmed" ta="center">
          {title}
        </Title>
        {description && (
          <Text size="sm" c="dimmed" ta="center" maw={280}>
            {description}
          </Text>
        )}
      </Stack>
      {action}
    </Stack>
  );
};

export default EmptyState;