import * as React from 'react'

import {
	useMemo,
} from '@wordpress/element'

import {
	useStyleOverride,
} from '@ska/utils'

const PresetStyle: React.FC<{slug: string, css: string}> = ({slug, css}) => {

	const presetCss = useMemo(() => {
		return css
			.replaceAll('.ska-preset-selector', `.ska-preset--${slug}`)
			.replaceAll('\n', '').replaceAll('\t', '').trim()
	}, [slug, css])

	useStyleOverride(`ska-preset--${slug}`, presetCss)

	return null
}

export default PresetStyle