import { nextui } from "@nextui-org/react";
import type { Config } from "tailwindcss";

const MAX_WIDTH = 1440;
const toRem = (px: number) => {
    return `${((4 * px) / (MAX_WIDTH / 10)).toFixed(2)}rem`;
};

const size: any = Array.from({ length: 100 }).reduce((map: any, _, index) => {
    map[index] = toRem(index);
    return map;
}, {});

// 0.0694rem
const config: Config = {
    content: [
        "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
        "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
        "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
        "./node_modules/@nextui-org/theme/dist/**/*.{" + "js,ts,jsx,tsx}",
    ],
    theme: {
        space: size,
        padding: size,
        height: size,
        minWidth: size,
        lineHeight: size,
        width: size,
        gap: size,
        minHeight: size,
        fontSize: size,
        extend: {
            backgroundImage: {
                "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
                "gradient-conic":
                    "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
            },
        },
    },
    plugins: [
        nextui({
            layout: {
                fontSize: {
                    tiny: "10px", // text-tiny
                    small: "12px", // text-small
                    medium: "14px", // text-medium
                    large: "16px", // text-large
                },
                lineHeight: {
                    tiny: "14px", // text-tiny
                    small: "24px", // text-small
                    medium: "22px", // text-medium
                    large: "20px",
                },
            },
            themes: {
                dark: {
                    colors: {
                        primary: "#ff6a01",
                    },
                },
                light: {},
            },
        }),
    ],
};
export default config;