import type { FC, ReactNode } from "react";

import { Paper, Stack, Text, Title } from "@mantine/core";

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

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

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

				<Text c="dimmed">{text}</Text>

				{action}
			</Stack>
		</Paper>
	);
};

export { StateView };