import type { ReactNode } from 'react';
import { Stack } from '@mui/material';
import { Heading } from '../Heading';
import { Text } from '../Text';

export interface ErrorStateProps {
  title: string;
  description?: string;
  action?: ReactNode;
}

export function ErrorState({ title, description, action }: ErrorStateProps) {
  return (
    <Stack spacing={1} alignItems="center" data-testid="error-state">
      <Heading as="h2">{title}</Heading>
      {description && <Text>{description}</Text>}
      {action && <div>{action}</div>}
    </Stack>
  );
}