@props([
    'name',
    'label',
    'value' => '',
    'minHeight' => '6rem',
    'help' => null,
])

@php
    $editorValue = \App\Support\WooHtml::normalizeForEditor(old($name, $value));
@endphp

<div {{ $attributes->merge(['class' => 'mt-4']) }}>
    <label class="block text-sm font-medium text-slate-700">{{ $label }}</label>
    @if($help)
        <p class="mt-0.5 text-xs text-slate-500">{{ $help }}</p>
    @endif

    <div x-data="wooRichText(@js($editorValue))" class="mt-1">
        <div class="flex items-center gap-1 rounded-t-xl border border-b-0 border-slate-200 bg-slate-50 px-2 py-1.5">
            <button type="button" @click="format('bold')"
                    class="rounded-md px-2 py-0.5 text-xs font-bold text-slate-600 hover:bg-white hover:text-slate-900"
                    title="Bold">B</button>
            <button type="button" @click="format('italic')"
                    class="rounded-md px-2 py-0.5 text-xs italic text-slate-600 hover:bg-white hover:text-slate-900"
                    title="Italic">I</button>
        </div>
        <div
            x-ref="editor"
            contenteditable="true"
            @input="sync"
            style="min-height: {{ $minHeight }}"
            class="w-full rounded-b-xl border border-slate-200 bg-white px-3 py-2 text-sm leading-relaxed text-slate-900 focus:outline-none focus:ring-2 focus:ring-indigo-500/20 [&_p]:my-2 [&_p:first-child]:mt-0 [&_p:last-child]:mb-0 [&_strong]:font-semibold [&_em]:italic"
        ></div>
        <input type="hidden" x-ref="input" name="{{ $name }}" :value="html">
    </div>
</div>