const data = [
	{
		name: "Anna Komnene",
		avatar: "https://i.imgur.com/dE1Xhg4.png",
		description:
			'"The truth is all barbarians are usually fickle and by nature unable to keep their pledges."'
	},
	{
		name: "John the Grammarian",
		avatar: "https://i.imgur.com/8gQ4w2N.png",
		description:
			'"If you let fall from the same height two weights, one many times heavier than the other you will see that the ratio of the times required for the motion does not depend on the weights."'
	},
	{
		name: "Michael Psellos",
		avatar: "https://i.imgur.com/Zi92cPk.png",
		description:
			'"The Chronographia composed by the most learned and right honourable monk Michael, in which are recounted the deeds of the following Emperors..."'
	},
	{
		name: "Plethon",
		avatar: "https://i.imgur.com/0bmcLTq.png",
		description:
			'"Similarly, if one observes something irrational in nature, then the nature that accomplishes the work certainly does not lie therein; for nature is a divine institution and a divine institution cannot be irrational."'
	}
];

const $container = document.getElementById("container");

const createElement = ({ type, parent, attributes, children }) => {
	const elem = document.createElement(type);

	if (attributes) {
		Object.keys(attributes).forEach(key => elem.setAttribute(key, attributes[key]));
	}

	if (children) {
		children.forEach(child => {
			if (typeof child === "string") {
        const $textNode = document.createTextNode(child);
        elem.appendChild($textNode);
			} else if (typeof child === "object") {
				createElement({
					...child,
					parent: elem
				});
			}
		});
	}

	parent.appendChild(elem);
	return elem;
};

for (const each of data) {
	const $card = createElement({
		type: "div",
		parent: $container,
		attributes: { class: "card" },
		children: [
			{
				type: "img",
				attributes: {
					class: "card-avatar",
					src: each.avatar
				}
			},
			{
				type: "h2",
				attributes: { class: "card-title" },
				children: [each.name]
			},
			{
				type: "p",
				attributes: { class: "card-content" },
				children: [each.description]
			}
		]
	});
}