import type { ReactNode } from 'react';
import { Center, Stack, Text } from '@mantine/core';

import { FreightVisual, type FreightVisualVariant } from './FreightVisual';

interface VisualEmptyStateProps {
  variant?: FreightVisualVariant;
  title: string;
  description?: string;
  action?: ReactNode;
}

/** Friendly empty state with a small freight illustration. */
export function VisualEmptyState({
  variant = 'empty',
  title,
  description,
  action,
}: VisualEmptyStateProps) {
  return (
    <Center py="xl">
      <Stack align="center" gap="xs" maw={360}>
        <FreightVisual variant={variant} size={88} style={{ opacity: 0.85 }} />
        <Text fw={600} ta="center">
          {title}
        </Text>
        {description && (
          <Text size="sm" c="dimmed" ta="center">
            {description}
          </Text>
        )}
        {action}
      </Stack>
    </Center>
  );
}