import type { NextConfig } from "next";

// SVGO's default preset (run by @svgr/webpack) strips `viewBox` whenever it
// exactly matches width/height, on the assumption nothing needs it once
// they're aligned. But every icon here gets CSS-resized (h-*/w-*/size-*
// utilities, [&_svg]:size-* wrappers), and without a viewBox the browser has
// no coordinate space to scale the artwork into — it just crops the SVG's
// native-size drawing down to the new CSS box instead of scaling it,
// producing icons that render as small cropped fragments instead of the
// full glyph. Keeping viewBox is what makes CSS resizing actually scale.
const svgrOptions = {
  svgo: true,
  svgoConfig: {
    plugins: [
      {
        name: "preset-default",
        params: {
          overrides: {
            removeViewBox: false,
          },
        },
      },
    ],
  },
};

const nextConfig: NextConfig = {
  // Enables next/navigation's forbidden() + forbidden.tsx boundaries — used
  // to gate Administration routes to Admin/Super User roles.
  experimental: {
    authInterrupts: true,
  },
  webpack(config) {
    config.module.rules.push({
      test: /\.svg$/,
      use: [{ loader: "@svgr/webpack", options: svgrOptions }],
    });
    return config;
  },
  turbopack: {
    rules: {
      "*.svg": {
        loaders: [{ loader: "@svgr/webpack", options: svgrOptions }],
        as: "*.js",
      },
    },
  },
};

export default nextConfig;