import * as React from 'react'
import {__, _x} from '@wordpress/i18n'

import {
	CodeEditorControl,
} from '@ska/components'

import type {
	Tailwind4Options,
} from '../../options'

import type {
	RenderOptionProps,
} from '@ska/plugin/src/components/options/RenderOption'

import './style.scss'

// eslint-disable-next-line @typescript-eslint/no-empty-object-type
export interface ThemeEditorProps extends RenderOptionProps<Tailwind4Options, string> {}

const ThemeEditor: React.FC<ThemeEditorProps> = props => {

	const {
		value,
		onChange,
		...option
	} = props

	const {
		id,
		label,
		description,
		props: controlProps = {},
	} = option

	return (
		<div className='ska-blocks__tailwind4__theme-editor'>
			<p>{description}</p>
			<CodeEditorControl
				id={id}
				label={label}
				hideLabelFromVision
				value={value}
				onChange={onChange}
				type='css'
				{...controlProps}
			/>
		</div>
	)
}

export default ThemeEditor