import { sveltekit } from '@sveltejs/kit/vite';
import type { UserConfig } from 'vite';
import Unocss from 'unocss/vite';
import presetIcons from '@unocss/preset-icons';
import presetUno from '@unocss/preset-uno';

const config: UserConfig = {
	plugins: [
		sveltekit(),
		Unocss({
			presets: [presetUno(), presetIcons()],
			rules: [
				[
					/^text-(.*)$/,
					([, c], { theme }) => {
						if (c in theme.colors) return { color: theme.colors[c as keyof typeof theme.colors] };
					}
				],
				[
					/^bg-(.*)$/,
					([, c], { theme }) => {
						if (c in theme.colors)
							return { 'background-color': theme.colors[c as keyof typeof theme.colors] };
					}
				]
			],
			shortcuts: {
				input: 'w-full max-w-80 text-lg pl-2 border border-solid border-2 rounded-xl',
				link: 'underline text-brunswick',
				btn: 'text-white bg-oxford px-4 py-2 rounded-3xl font-bold border-0 cursor-pointer',
				'btn-red': 'text-white bg-red-500 px-4 py-2 rounded-3xl font-bold border-0 cursor-pointer',
				'btn-sunray': 'text-white bg-sunray px-4 py-2 rounded-3xl font-bold border-0 cursor-pointer'
			},
			theme: {
				colors: {
					oxford: '#0a274c',
					sunray: '#d3a95a',
					brunswick: '#1e4832'
				}
			}
		})
	]
};

export default config;