'use client';
import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
import React from 'react';
import { useField } from '../../../forms/useField/index.js';
import { useTranslation } from '../../../providers/Translation/index.js';
import './index.scss';
const baseClass = 'section-title';
/**
 * An input field representing the block's `blockName` property - responsible for reading and saving the `blockName`
 * property from/into the provided path.
 */ export const SectionTitle = (props)=>{
    const { customOnChange, customValue, path, readOnly } = props;
    const { setValue, value } = useField({
        path
    });
    const { t } = useTranslation();
    const classes = [
        baseClass
    ].filter(Boolean).join(' ');
    const onChange = customOnChange || ((e)=>{
        e.stopPropagation();
        e.preventDefault();
        setValue(e.target.value);
    });
    return /*#__PURE__*/ _jsxDEV("div", {
        className: classes,
        "data-value": customValue || value,
        children: /*#__PURE__*/ _jsxDEV("input", {
            className: `${baseClass}__input`,
            id: path,
            name: path,
            onChange: onChange,
            placeholder: t('general:untitled'),
            readOnly: readOnly,
            type: "text",
            value: customValue || value || ''
        }, void 0, false, {
            fileName: "src/fields/Blocks/SectionTitle/index.tsx",
            lineNumber: 39,
            columnNumber: 7
        }, this)
    }, void 0, false, {
        fileName: "src/fields/Blocks/SectionTitle/index.tsx",
        lineNumber: 38,
        columnNumber: 5
    }, this);
};

//# sourceMappingURL=index.js.map