import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import "./style.scss";
import GetSvgIcon from "../GetSvgIcon";
import { useEffect, useState } from "react";
const CampaignSubject = ({ text, placeholder = "", iconSize = "18", onChange = () => { }, }) => {
    const [subjectText, setSubjectText] = useState("");
    const crossClicked = () => {
        onChange("");
        setSubjectText("");
    };
    useEffect(() => {
        if (text.length > 0) {
            setSubjectText(text);
        }
    }, []);
    return (_jsxs("div", { className: "CampaignSubject--Wrapper", children: [_jsx("p", { className: "CampaignSubjectHeading", children: "Subject" }), _jsxs("div", { className: "CampaignSubject--Container", children: [_jsx("input", { placeholder: placeholder, value: subjectText, onChange: (e) => {
                            onChange(e.target.value);
                            setSubjectText(e.target.value);
                        } }), _jsx("button", { className: "CampaignSubject--SvgButton", onClick: crossClicked, children: _jsx(GetSvgIcon, { iconType: "cross", iconSize: iconSize }) })] })] }));
};
export default CampaignSubject;
