import gsap from 'gsap'

const generateShades = (colors) => {
    const result = {}

    for (const [key, value] of Object.entries(colors)) {
        result[key] = value

        for (let i = 0; i <= 19; i++) {
            const split = gsap.utils.splitColor(value)
            const rgb = split.toString().replaceAll(',', ' ')
            const alpha = parseInt((((i / 20) * 0xff) / 255) * 100)

            result[`${key}-${i * 5}`] = `rgb(${rgb} / ${alpha}%)`
        }
    }

    return result
}

const colors = generateShades({
    black: '#0B0D0B',
    white: '#FCFCF6',
    purple: '#541CDC',
})

const themes = {
    light: {
        bg: colors.white,
        fg: colors.black,
        contrast: colors.purple,
    },
    dark: {
        bg: colors.black,
        fg: colors.white,
        contrast: colors.purple,
    },
}

const breakpoints = {
    mobile: 800,
}

const viewports = {
    mobile: {
        width: 480,
        height: 872,
    },
    desktop: {
        width: 1920,
        height: 1080,
    },
}

const scrollSmoothing = 0.7

export { colors, themes, breakpoints, viewports, scrollSmoothing }

export default {
    colors,
    themes,
    breakpoints,
    viewports,
    scrollSmoothing,
}