import { Card, Center, Stack, Text, ThemeIcon, Title } from '@mantine/core';
import { IconTool } from '@tabler/icons-react';
import type { ReactNode } from 'react';

interface FeatureUnavailableProps {
  /** What the screen will eventually do, e.g. "Seaman Book applications". */
  title: string;
  /** Optional extra context — what is missing, or what to use instead. */
  description?: string;
  action?: ReactNode;
}

/**
 * Placeholder for a screen whose backend does not exist yet.
 *
 * These pages previously rendered hardcoded sample rows, which read as real
 * records: reviewers saw queues of applications that had never been filed and
 * dashboards counting things nobody had done. Showing nothing is the honest
 * option — an empty screen cannot be mistaken for data.
 */
export function FeatureUnavailable({
  title,
  description,
  action,
}: FeatureUnavailableProps) {
  return (
    <Center mih={320}>
      <Card withBorder radius="md" padding="xl" maw={520} w="100%">
        <Stack align="center" gap="sm">
          <ThemeIcon size={48} radius="xl" variant="light" color="gray">
            <IconTool size={24} stroke={1.5} />
          </ThemeIcon>
          <Title order={4} ta="center">
            {title}
          </Title>
          <Text size="sm" c="dimmed" ta="center">
            {description ??
              'This feature is not connected to the backend yet, so there is nothing to show.'}
          </Text>
          {action}
        </Stack>
      </Card>
    </Center>
  );
}