import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
//import reportWebVitals from './reportWebVitals';

//function Hello(props) {
//    return (
//    <div>
//            <h1> Witaj {props.imie + " " + props.nazwisko}! </h1>
//            <input type='number' max='100' className="pole" />
//    </div>
//    );
//}

//const year = 2018;
const date = new Date();
const imie = "Adrianna";

const project1 = {
    id: 1,
    title: "ABC",
    image: "https://change-it.biz/wp-content/uploads/2016/11/sap-hana-it-project-management.jpg",
    desc: "Nam condimentum fringilla consectetur. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Curabitur ut blandit quam. Morbi eget erat nisl. Nunc porta aliquam nisl et elementum. Donec quam lacus, venenatis id semper id, sodales eget urna. Praesent sit amet mauris egestas, tempus augue sed, dignissim enim. Sed malesuada augue eu nibh fringilla luctus.",
    tags: "#HTML #CSS #JS",
    year: '2019'
}

const project2 = {
    id: 2,
    title: "XYZ",
    image: "https://change-it.biz/wp-content/uploads/2016/11/sap-hana-it-project-management.jpg",
    desc: "Praesent sit amet mauris egestas, tempus augue sed, dignissim enim. Sed malesuada augue eu nibh fringilla luctus. Nam condimentum fringilla consectetur. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Curabitur ut blandit quam. Morbi eget erat nisl. Nunc porta aliquam nisl et elementum. Donec quam lacus, venenatis id semper id, sodales eget urna.",
    tags: "#HTML #CSS #React",
    year: '2021'
}

const project3 = {
    id: 3,
    title: "XYZ",
    image: "https://change-it.biz/wp-content/uploads/2016/11/sap-hana-it-project-management.jpg",
    desc: "Praesent sit amet mauris egestas, tempus augue sed, dignissim enim. Sed malesuada augue eu nibh fringilla luctus. Nam condimentum fringilla consectetur. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Curabitur ut blandit quam. Morbi eget erat nisl. Nunc porta aliquam nisl et elementum. Donec quam lacus, venenatis id semper id, sodales eget urna.",
    tags: "#HTML #CSS #React",
    year: '2021'
}


const names = ['Anna', 'Matuesz', 'Irek'];

const projectsTab = [project1, project2, project3];



const namesMapped = names.map(
    (name) => {
        return <h1> {name.toUpperCase()} </h1>
    }
);

function Projects() {
    return (
        <section className="projects">
            {projectsMapped}
        </section>
    );
}

const Project = (props) => {
    const { title, image, desc, tags, year } = props.project;
    return (
        <article className="project">
            <Title title={title} />
            <Image image={image} />
            <Desc desc={desc} />
            <Tags tags={tags} />
            <ProjectDate now={date.getFullYear()} projectYear={year} author={imie} />
        </article>
    );
}

const Title = (props) => <h1> {props.title} </h1>

const Image = (props) => <img src={props.image} height="150px" className="pic" />

const Desc = (props) => <p> {props.desc} </p>

const Tags = (props) => <p> {props.tags} </p>

const ProjectDate = ({ now, projectYear, author }) => <h4> Wykonano {now - projectYear} lat temu przez {author.toUpperCase()}</h4>

const projectsMapped = projectsTab.map(
    (project) => {
        //console.log(project)
        return (
            <Project project={project} key={project.id} />
        );
    }
);

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <Projects />
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
//reportWebVitals();