import Skeleton from "react-loading-skeleton";
import "react-loading-skeleton/dist/skeleton.css";
const AskeletonArticle = () => {
  return (
    <>
      <Skeleton count={1} />
      <div className="flex flex-col gap-4 pb-4">
        <Skeleton count={1} containerClassName="title w-3/4 text-2xl" />
        <Skeleton count={1} containerClassName="authors w-1/4" />
        <hr></hr>
      </div>
      <div className="interActions-buttons flex">
        <Skeleton count={1} containerClassName="w-1/12 mr-2 text-xl" />
        <Skeleton count={1} containerClassName="w-1/12 mr-2 text-xl" />
        <Skeleton count={1} containerClassName="w-1/12 mr-2 text-xl" />
        <Skeleton count={1} containerClassName="w-1/12 mr-2 text-xl" />
      </div>
      <div className=" my-10 flex flex-col gap-2">
        <Skeleton
          count={1}
          className="keywords-title text-2xl"
          containerClassName="w-1/4"
        />
        <div className="flex">
          <Skeleton
            count={1}
            className="border-2 border-[#ebebeb]"
            containerClassName="w-1/6 mr-2"
            baseColor="transparent"
          />
          <Skeleton
            count={1}
            className="border-2 border-[#ebebeb]"
            containerClassName="w-1/6 mr-2"
            baseColor="transparent"
          />
          <Skeleton
            count={1}
            className="border-2 border-[#ebebeb]"
            containerClassName="w-1/6 mr-2"
            baseColor="transparent"
          />
          <Skeleton
            count={1}
            className="border-2 border-[#ebebeb]"
            containerClassName="w-1/6 mr-2"
            baseColor="transparent"
          />
        </div>
      </div>
      <div className="my-10 flex flex-col gap-2">
        <Skeleton count={1} width={200} className="text-2xl" />
        <Skeleton count={25} />
      </div>
    </>
  );
};

export default AskeletonArticle;