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

type StateViewProps = {
	title: string;
	text: string;
	action?: ReactNode;
	error?: boolean;
};

const StateView: FC<StateViewProps> = (props) => {
	const { title, text, action, error = false } = props;
	const role = error ? "alert" : undefined;

	return (
		<Paper p="xl" radius="md" shadow="xs" withBorder role={role}>
			<Stack align="flex-start" gap="sm">
				<Title order={2}>{title}</Title>
				<Text c="dimmed">{text}</Text>
				{action}
			</Stack>
		</Paper>
	);
};

export { StateView };