import { FunctionComponent } from 'react';
import { Stack, Typography } from '@mui/material';
import AppIcon from '../common/AppIcon';

export interface PlaceholderScreenProps {
  /** Screen title (already translated by the caller). */
  title: string;
  /** Optional supporting line (already translated). */
  description?: string;
  /** Registered AppIcon name to show above the title. */
  icon?: string;
}

/**
 * Empty-state scaffold for screens whose real content lands in a later phase.
 * Presentational only — the caller passes already-translated copy so the component
 * stays i18n-agnostic and reusable across all three actor shells.
 * @component PlaceholderScreen
 */
const PlaceholderScreen: FunctionComponent<PlaceholderScreenProps> = ({ title, description, icon }) => (
  <Stack
    sx={{ alignItems: 'center', justifyContent: 'center', textAlign: 'center', gap: 1.5, py: 8, px: 2 }}
  >
    {icon && <AppIcon icon={icon} size={48} color="var(--bal-secondary)" />}
    <Typography variant="h5" component="h1">
      {title}
    </Typography>
    {description && (
      <Typography variant="body1" sx={{ color: 'text.secondary', maxWidth: 420 }}>
        {description}
      </Typography>
    )}
  </Stack>
);

export default PlaceholderScreen;
