---
/* ---------------------------------------------------------------------------
 * MarkdownField — textarea with a Preview toggle.
 *
 * The preview panel is rendered server-side once with the current value, so
 * it's available the moment the toggle flips even without a network call.
 * Toggling on does NOT re-render — that's a Phase 2 enhancement. The toggle
 * itself is keyboard-accessible.
 * ------------------------------------------------------------------------- */

import { renderMd } from '../../../lib/markdown';
import type { MarkdownField } from '../../resource-types';

interface Props {
  field: MarkdownField;
  value: unknown;
}

const { field, value } = Astro.props;
const v = value == null ? '' : String(value);
const previewHtml = v ? renderMd(v) : '<p class="bs-md-empty">Nothing to preview yet.</p>';
---

<div class="bs-md" data-md-field={field.key}>
  <div class="bs-md-toolbar">
    <button type="button" class="bs-md-tab is-active" data-md-mode="edit">Write</button>
    <button type="button" class="bs-md-tab" data-md-mode="preview">Preview</button>
  </div>

  <textarea
    id={`f-${field.key}`}
    name={field.key}
    class="bs-input bs-textarea bs-md-input"
    rows={field.rows ?? 14}
    maxlength={field.maxLength}
    required={field.required}
    readonly={field.readOnly}
  >{v}</textarea>

  <div class="bs-md-preview" hidden set:html={previewHtml} />
</div>
