import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useState } from "react";
import Dropdown from "../Dropdown";
import "./style.scss";
import { InputFieldWithSvg, PrimaryButton } from "..";
import ClickableCard from "../ClickableCard";
const TemplateCard = ({}) => {
    const [dropDownValue, setDropDownValue] = useState("Templates");
    const [cardText, setCardText] = useState("");
    useEffect(() => {
        alert(dropDownValue);
    }, [dropDownValue]);
    const handleClick = () => {
        alert("Button clicked");
        return;
        console.log(cardText);
    };
    const handleChange = () => {
        alert("Search Text Changed!");
    };
    return (_jsxs("div", { className: "main--card--temp", children: [_jsx("div", { className: "title-bar-temp", children: _jsxs("div", { className: "title-div--", children: [_jsx("div", { className: "ti-tle", children: "Templates" }), _jsxs("div", { children: [" ", _jsx(Dropdown, { dropdownOnClickHandler: (value) => {
                                        setDropDownValue(value);
                                    } }), " "] })] }) }), _jsx("span", { className: "title-text", children: "Select a template to fill in the messages" }), _jsxs("div", { className: "search", children: [_jsx("div", { className: "search-div", children: _jsx(InputFieldWithSvg, { onChange: handleChange, showIconOnLeft: true }) }), _jsx(PrimaryButton, { text: "Create New", colorVariant: "orange", sizeVariant: "base", onClick: handleClick })] }), _jsx("div", { className: "otherCards", children: Array.from([1, 2, 3, 4, 5, 6, 7]).map(() => {
                    return _jsx(ClickableCard, { getText: (val) => setCardText(val) });
                }) })] }));
};
export default TemplateCard;
