sarlink-portal/components/client-error-message.tsx

import { Phone, TriangleAlert } from "lucide-react";
import Link from "next/link";
import { Button } from "./ui/button";

export default function ClientErrorMessage({ message }: { message: string }) {
	return (
		<div className="error-bg dark:error-bg-dark rounded-lg p-4 h-full flex flex-col gap-4 items-center justify-center">
			<div className="bg-white dark:bg-transparent p-6 rounded flex flex-col items-center justify-center gap-4">
				<TriangleAlert color="red" />
				<h6 className="text-red-500 text-sm font-semibold">{message}</h6>
				{message === "You do not have permission to perform this action." && (
					<>
						<span className="text-muted-foreground">
							Please contact the administrator to give you permissions.
						</span>
						<Link href="tel:9198026">
							<Button>
								<Phone /> 919-8026
							</Button>
						</Link>
					</>
				)}
			</div>
		</div>
	);
}