import {
    createElement, //keep this createElement even we dont use it directly. bundler need it to bundle at run time
    Fragment, //keep this Fragment even we dont use it directly. bundler need it to bundle at run time
} from "@wordpress/element";
import { __ } from "@wordpress/i18n";

const Item = ({checked, onChange, name, badge, itemKey, docLink, liveLink, class_name, disabled}) => {

    return (
        <div className={`etafe-item ${class_name}`}>
            <label className="etafe-item-switch">
                <input
                    type="checkbox"
                    className="etafe-item-checkbox"
                    value={itemKey}
                    checked={checked}
                    data-disabled={disabled}
                    onChange={() => onChange(itemKey)}
                />
                <span className="etafe-switch-slider"></span>
            </label>
            <div className="etafe-item-content">
                <div className="etafe-item-content-inner">
                    <h4>{name}</h4>
                    <span className="etafe-badge etafe-badge-free">{badge}</span>
                </div>
                {(docLink || liveLink) && (
                    <div className="extra-links">
                        {docLink && (
                            <a href={docLink} target="_blank" title={__('Documentation', 'elentix-addons-for-elementor')}>
                                <svg viewBox="0 0 24 24"><path d="M21 8V20.9932C21 21.5501 20.5552 22 20.0066 22H3.9934C3.44495 22 3 21.556 3 21.0082V2.9918C3 2.45531 3.4487 2 4.00221 2H14.9968L21 8ZM19 9H14V4H5V20H19V9ZM8 7H11V9H8V7ZM8 11H16V13H8V11ZM8 15H16V17H8V15Z"></path></svg>
                            </a>
                        )}
                        {liveLink && (
                            <a href={liveLink} target="_blank" title={__('Live Demo', 'elentix-addons-for-elementor')}>
                                <svg viewBox="0 0 24 24"><path d="M10 6V8H5V19H16V14H18V20C18 20.5523 17.5523 21 17 21H4C3.44772 21 3 20.5523 3 20V7C3 6.44772 3.44772 6 4 6H10ZM21 3V11H19L18.9999 6.413L11.2071 14.2071L9.79289 12.7929L17.5849 5H13V3H21Z"></path></svg>
                            </a>
                        )}
                    </div>
                )}
            </div>
        </div>
    );
}
export default Item;