import type { NextConfig } from "next";

// SVGR rewrites hardcoded black/white fills to `currentColor` so SVGs
// inherit the surrounding CSS `color` (Tailwind's text-*) like Tabler icons do.
const svgrOptions = {
  replaceAttrValues: {
    "#000": "currentColor",
    "#000000": "currentColor",
    black: "currentColor",
    "#fff": "currentColor",
    "#ffffff": "currentColor",
    white: "currentColor",
  },
};

const nextConfig: NextConfig = {
  output: "standalone",

  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "picsum.photos",
      },
    ],
  },

  turbopack: {
    rules: {
      "*.svg": {
        loaders: [
          {
            loader: "@svgr/webpack",
            options: svgrOptions,
          },
        ],
        as: "*.js",
      },
    },
  },

  webpack(config) {
    config.module.rules.push({
      test: /\.svg$/i,
      issuer: /\.[jt]sx?$/,
      use: [{ loader: "@svgr/webpack", options: svgrOptions }],
    });
    return config;
  },
};

export default nextConfig;