import { h } from "@stencil/core";
import { configStore } from "../../store/store";
export const ZInputArea = ({ id, label, placeholder = '', value = '', onChange, autoFocus, rows = 3, error, limit }) => {
    const theme = configStore.get('theme');
    const handleChange = (event) => {
        const val = event.target.value;
        if (limit && val.length > limit) {
            event.target.value = val.slice(0, limit);
        }
        onChange?.(event.target.value);
    };
    return (h("div", { class: "mb-2", "data-theme": theme }, label && h("label", { class: "z-input-area-label" }, label), h("textarea", { id: id, placeholder: placeholder, class: "z-input-area-input", value: value, onInput: handleChange, autoFocus: autoFocus, rows: rows, maxLength: limit }), h("div", { class: "flex justify-between" }, h("p", { class: "z-input-area-error" }, error), h("p", { class: "z-input-area-limit" }, limit ? `${value.length}/${limit}` : ''))));
};
