import useEditorStore from "./useEditorStore";
import { CiViewTable } from "react-icons/ci";
import { CiImageOn } from "react-icons/ci";
import { MdOutlineTextFields } from "react-icons/md";
import { BsQrCode } from "react-icons/bs";
import { AiOutlineLine } from "react-icons/ai";
import { TbSum } from "react-icons/tb";
import { RiRectangleLine } from "react-icons/ri";

export default function Toolbox() {
    const addElement = useEditorStore((state) => state.addElement);

    const tools = [
        { type: "text", label: <MdOutlineTextFields size={25} />, title: "Text" },
        { type: "image", label: <CiImageOn size={25} />, title: "Image" },
        { type: "qrcode", label: <BsQrCode size={25} />, title: "QR Code" },
        { type: "line", label: <AiOutlineLine size={25} />, title: "Line" },
        { type: "rectangle", label: <RiRectangleLine size={25} />, title: "Rectangle" },
        { type: "summary", label: <TbSum size={25} />, title: "Summary" },
        { type: "table", label: <CiViewTable size={25} />, title: "Table" },
    ];

    return (
        <div style={{
            width: 60,
            background: "#fff",
            borderRight: "1px solid #ddd",
            display: "flex",
            flexDirection: "column",
            alignItems: "center",
            paddingTop: 10
        }}>
            {tools.map((t) => (
                <div
                    key={t.type}
                    onClick={() => addElement(t.type)}
                    title={t.title}
                    style={{
                        width: 40,
                        height: 40,
                        marginBottom: 10,
                        display: "flex",
                        alignItems: "center",
                        justifyContent: "center",
                        cursor: "pointer",
                        borderRadius: 6,
                        background: "#f5f5f5",
                        fontSize: "16px",
                        fontWeight: "bold",
                        transition: "all 0.2s",
                    }}
                    onMouseEnter={(e) => {
                        e.target.style.background = "#e0e0e0";
                    }}
                    onMouseLeave={(e) => {
                        e.target.style.background = "#f5f5f5";
                    }}
                    className="editor-tool-btn"
                >
                    {t.label}
                </div>
            ))}
        </div>
    );
}