import { FC } from "react";

export const Loader: FC = () => {
  const tragedy = [
    "Did you ever hear the tragedy of Darth Plagueis the Wise?",
    "No.",
    "I thought not. It's not a story the Jedi would tell you. It's a Sith legend. Darth Plagueis... was a Dark Lord of the Sith so powerful and so wise, he could use the Force to influence the midi-chlorians... to create... life. He had such a knowledge of the dark side, he could even keep the ones he cared about... from dying.",
    "He could actually... save people from death?",
    "The dark side of the Force is a pathway to many abilities... some consider to be unnatural.",
    "Wh– What happened to him?",
    "He became so powerful, the only thing he was afraid of was... losing his power. Which eventually, of course, he did. Unfortunately, he taught his apprentice everything he knew. Then his apprentice killed him in his sleep. It's ironic. He could save others from death, but not himself.",
    "Is it possible to learn this power?",
    "Not from a Jedi.",
  ];

  return (
    <>
      <section className="heading">
        <h2 className="strapline skeleton">Do It</h2>
        <h1 className="skeleton">Kill him. Kill him now.</h1>
      </section>
      <section>
        {tragedy.map((t) => <p key={t} className=".skeleton">{t}</p>)}
      </section>
    </>
    // <div className="mx-auto text-9xl flex justify-center py-24">
    //   Wrangling Cats...
    // </div>
  );
};
