---
interface Props {
  name: string;
  label: string;
  value?: string | null;
  scope: "settings" | "cases" | "posts";
  id?: string;
}

const { name, label, value = "", scope, id = name } = Astro.props;
---

<div class="image-field" data-image-field data-scope={scope}>
  <label for={id}>{label}</label>
  <input
    id={id}
    name={name}
    type="text"
    value={value ?? ""}
    placeholder="https://... 或按下面上傳"
    class="image-url"
  />
  <div class="image-actions">
    <input type="file" accept="image/*" data-image-input />
    <span class="image-status" data-image-status></span>
  </div>
  <img class="image-preview" data-image-preview src={value || undefined} alt="" hidden={!value} />
</div>