import { useAuthStore } from '../lib/auth';

export function NoAccess() {
  const { user, logout } = useAuthStore();

  return (
    <div className="min-h-screen bg-gray-50 flex items-center justify-center p-4">
      <div className="bg-white rounded-xl shadow-lg max-w-md w-full p-10 text-center">
        <div className="w-14 h-14 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-5">
          <svg className="w-7 h-7 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
          </svg>
        </div>
        <h1 className="text-xl font-semibold text-gray-900 mb-2">No Access Yet</h1>
        <p className="text-gray-500 mb-2">
          Hi <strong>{user?.full_name || user?.email}</strong>, your account has been created but you haven't been added to any organization.
        </p>
        <p className="text-sm text-gray-400 mb-8">
          Ask your admin to invite you via email. Once you accept the invitation you'll have access.
        </p>
        <button
          onClick={() => logout()}
          className="text-sm text-gray-500 hover:text-gray-700 underline"
        >
          Sign out
        </button>
      </div>
    </div>
  );
}
