import type { Accessor, Component } from 'solid-js'
import { mergeProps } from 'solid-js'

const inputStyle = {
	'--sl-input-font-size-small': '14px',
}

export const CidInput: Component<{
	value: Accessor<string>
	onInput: (evt: InputEvent) => any // TODO type seems to be evt based on consumer usage
	placeholder?: string
}> = function CidInput(_props) {
	const props = mergeProps({ placeholder: 'IPNS (k51q...), #TODO: CID (bafy...) ' }, _props)
	return (
		<sl-input
			placeholder={props.placeholder}
			value={props.value()}
			onInput={props.onInput}
			filled
			font-mono
			size='small'
			max-w-full
			min-w-fit
			spellcheck={false}
			style={inputStyle}
		/>
	)
}