import React from 'react';
import { ROUTES } from '../../router/routes.config';

const UnauthorizedPage: React.FC = () => (
    <div className="flex items-center justify-center min-h-screen bg-bg-primary">
        <div className="text-center max-w-md mx-auto px-6">
            <div className="mb-6">
                <div className="w-16 h-16 mx-auto mb-4 bg-color-error rounded-full flex items-center justify-center">
                    <svg
                        className="w-8 h-8 text-text-inverse"
                        fill="none"
                        stroke="currentColor"
                        viewBox="0 0 24 24"
                    >
                        <path
                            strokeLinecap="round"
                            strokeLinejoin="round"
                            strokeWidth={2}
                            d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.732 19.5c-.77.833.192 2.5 1.732 2.5z"
                        />
                    </svg>
                </div>
                <h1 className="text-2xl font-bold text-text-primary mb-2">
                    Acceso no autorizado
                </h1>
                <p className="text-text-secondary mb-6">
                    No tienes permisos para acceder a esta página. Contacta con tu administrador si crees que esto es un error.
                </p>
            </div>

            <div className="flex flex-col gap-3">
                <button
                    onClick={() => window.history.back()}
                    className="btn btn-primary"
                >
                    Volver atrás
                </button>
                <button
                    onClick={() => window.location.href = ROUTES.DASHBOARD}
                    className="btn btn-outline"
                >
                    Ir al Panel de Control
                </button>
            </div>
        </div>
    </div>
);

export default UnauthorizedPage;
