import type { EditorInputProps } from '../types/types'

function EditorInput({ value, onChange }: EditorInputProps) {
  return (
    <textarea
      className="flex-1 md:flex-1 md:w-1/2 w-full h-[45vh] md:h-auto p-3 md:p-4 font-mono text-sm outline-none border-b md:border-b-0 md:border-r"
      style={{
        borderColor: 'var(--border)',
        backgroundColor: 'var(--bg)',
        color: 'var(--fg)',
        caretColor: 'var(--fg)',
      }}
      placeholder="# Titre&#10;Saisissez votre markdown ici..."
      value={value}
      onChange={(e) => onChange(e.target.value)}
      spellCheck={false}
    />
  )
}

export default EditorInput