import { FC } from "react";

export const MDSkeletonLoader: 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.",
  ];

  const bucket = [
    "Dear God",
    "Theres more",
    "No!",
    "It contains, a bucket!",
  ];

  const indentation = ["ml-0", "ml-6", "ml-12"];

  return (
    <>
      <section className="heading">
        <h2 className="strapline skeleton w-min whitespace-nowrap">Do It</h2>
        <h1 className="skeleton w-min whitespace-nowrap">
          Kill him. Kill him now.
        </h1>
      </section>
      <section className="grid grid-cols-3">
        <div className="col-span-2">
          {tragedy.map((t) => (
            <p key={t} className="my-2 leading-8">
              <span className="skeleton p-1">{t}</span>
            </p>
          ))}
          <div className="col-span-2 grid grid-cols-3 my-6 gap-8">
            <div className="card skeleton h-36"></div>
            <div>
              <p>
                <span className="skeleton">Hey man I heard you like memes</span>
              </p>
              <p>
                <span className="skeleton">
                  I&apos;ll be honest, I&apos;m just kind of phoning it in down
                  here. The other memes came to mind really easily, but I could
                  think of anything for down here. Ooh look, lorem ipsum!
                </span>
              </p>
              <p>
                <span className="skeleton">
                  Lorem ipsum dolor, sit amet consectetur adipisicing elit.
                  Exercitationem fugiat sed odit sunt ex ab maxime qui animi
                  optio! Rem itaque nesciunt beatae voluptas facilis optio natus
                  culpa. Corrupti, error.
                </span>
              </p>
            </div>
            <div className="card skeleton h-48"></div>
          </div>
        </div>
        <div className="mt-4">
          <h3 className="text-3xl skeleton w-min whitespace-nowrap">
            This is a bucket
          </h3>
          <ul className="list-disc ml-6 ">
            {Array(Math.floor(Math.random() * 3) + 2).fill(bucket).flat().map((
              t,
              i,
            ) => (
              <li
                key={t}
                className={"my-2 leading-8 text-black/20 " + indentation[
                  i === 0 ? 0 : Math.floor(Math.random() * indentation.length)
                ]}
              >
                <span className="skeleton p-1">{t}</span>
              </li>
            ))}
          </ul>
        </div>
      </section>
    </>
    // <div className="mx-auto text-9xl flex justify-center py-24">
    //   Wrangling Cats...
    // </div>
  );
};