import { ShieldAlert } from "lucide-react";
import { Button } from "@/shared/components";

interface AccessDeniedPageProps {
  onBackHome: () => void;
}

export const AccessDeniedPage = ({ onBackHome }: AccessDeniedPageProps) => (
  <div className="mx-auto flex min-h-[55vh] max-w-xl flex-col items-center justify-center text-center">
    <div className="mb-5 rounded-full border border-red-100 bg-red-50 p-4">
      <ShieldAlert className="h-10 w-10 text-red-500" />
    </div>
    <h2 className="text-2xl font-semibold text-slate-900">Access denied</h2>
    <p className="mt-2 text-sm leading-6 text-slate-500">
      Your current role or workspace permissions do not allow this page. If access was just granted,
      sign out and sign back in to refresh the permission version.
    </p>
    <div className="mt-6">
      <Button type="button" variant="primary" onClick={onBackHome}>
        Back to Home
      </Button>
    </div>
  </div>
);
