import "../styles/pages/userLibrary.css";
import { useEffect, useState } from 'react';

export default function UserLibrary() {
  const [myApps, setMyApps] = useState([]);

  useEffect(() => {
    setMyApps([
      {
        id: 1,
        appName: "To-Do",
        appImage: "../assets/images/app-icon.jpg",
        appDetails: "A simple To-Do application that allows the user the abilities of setting reminders and priority levels. jal;kdsjfkl ja;lksdjflk ja;sldkjf;al ksjd;flkja;sl kdjf;alksjd ;flkja;slk djf;l aksjd;lkf ja;lskdjf;lak jsd;lkfj ;als kdjfl;k ajs;ldk jf;laksj d;lfkja;lk djwlei jvlkan s;ldkajf kdjflaksdj vlkajsdlkj flaksjdvl; kajs;dklj v;alskdjv ;lkasjd;vlkajsdl;kv ja;lskdjv;a lksdjv;laksjdlvjoiwejv joivj oaijdlkvja ;sliej vliajsdlkjv",
        appAuthor: "mekasu0124",
        appRepoUrl: "https://github.com/mekasu0124/MeksTodo"
      },
      {
        id: 2,
        appName: "To-Do",
        appImage: "../assets/images/app-icon.jpg",
        appDetails: "A simple To-Do application that allows the user the abilities of setting reminders and priority levels.",
        appAuthor: "mekasu0124",
        appRepoUrl: "https://github.com/mekasu0124/MeksTodo"
      },
      {
        id: 3,
        appName: "To-Do",
        appImage: "../assets/images/app-icon.jpg",
        appDetails: "A simple To-Do application that allows the user the abilities of setting reminders and priority levels.",
        appAuthor: "mekasu0124",
        appRepoUrl: "https://github.com/mekasu0124/MeksTodo"
      },
      {
        id: 4,
        appName: "To-Do",
        appImage: "../assets/images/app-icon.jpg",
        appDetails: "A simple To-Do application that allows the user the abilities of setting reminders and priority levels.",
        appAuthor: "mekasu0124",
        appRepoUrl: "https://github.com/mekasu0124/MeksTodo"
      },
      {
        id: 5,
        appName: "To-Do",
        appImage: "../assets/images/app-icon.jpg",
        appDetails: "A simple To-Do application that allows the user the abilities of setting reminders and priority levels.",
        appAuthor: "mekasu0124",
        appRepoUrl: "https://github.com/mekasu0124/MeksTodo"
      },
      {
        id: 6,
        appName: "To-Do",
        appImage: "../assets/images/app-icon.jpg",
        appDetails: "A simple To-Do application that allows the user the abilities of setting reminders and priority levels.",
        appAuthor: "mekasu0124",
        appRepoUrl: "https://github.com/mekasu0124/MeksTodo"
      },
      {
        id: 7,
        appName: "To-Do",
        appImage: "../assets/images/app-icon.jpg",
        appDetails: "A simple To-Do application that allows the user the abilities of setting reminders and priority levels.",
        appAuthor: "mekasu0124",
        appRepoUrl: "https://github.com/mekasu0124/MeksTodo"
      },
      {
        id: 8,
        appName: "To-Do",
        appImage: "../assets/images/app-icon.jpg",
        appDetails: "A simple To-Do application that allows the user the abilities of setting reminders and priority levels.",
        appAuthor: "mekasu0124",
        appRepoUrl: "https://github.com/mekasu0124/MeksTodo"
      },
      {
        id: 9,
        appName: "To-Do",
        appImage: "../assets/images/app-icon.jpg",
        appDetails: "A simple To-Do application that allows the user the abilities of setting reminders and priority levels.",
        appAuthor: "mekasu0124",
        appRepoUrl: "https://github.com/mekasu0124/MeksTodo"
      }
    ]);
  }, []);

  const getApps = () => {
    return myApps.map((app) => {
      return (
        <div className="container card" key={app.id} style={{ backgroundImage: `url(${app.appImage})`}}>
          <div className="container row">
            <h2 id="card-title">{app.appName}</h2>
          </div>

          <label id="card-text">Author: {app.appAuthor}</label>

          <label id="card-text">GitHub Repo: {app.appRepoUrl}</label>

          <label id="card-text">{app.appDetails}</label>
        </div>
      );
    });
  };

  return (
    <div className="library-container">
      { getApps() }
    </div>
  );
};