import { Skeleton } from "@/components/ui/skeleton";
import React from "react";

const UserMontlyActivitySkeleton = () => {
  return (
    <div className="flex gap-5 w-full overflow-hidden">
      <div className="bg-white/50 space-y-2 flex-grow px-2 py-3 rounded-md ">
        <Skeleton className="h-2 ml-1 w-[50%] md:w-[70%] rounded-md" />
        <div className="flex justify-between px-2 items-center">
          <Skeleton className="h-2 ml-1 w-[30%] rounded-md" />
          <Skeleton className="h-16  w-16 rounded-xl" />
        </div>
      </div>
      <div className="bg-white/50 space-y-2 flex-grow px-2 py-3 rounded-md ">
        <Skeleton className="h-2 ml-1 w-[50%] md:w-[70%] rounded-md" />
        <div className="flex justify-between px-2 items-center">
          <Skeleton className="h-2 ml-1 w-[30%] rounded-md" />
          <Skeleton className="h-16  w-16 rounded-xl" />
        </div>
      </div>
      <div className="bg-white/50 space-y-2 flex-grow px-2 py-3 rounded-md ">
        <Skeleton className="h-2 ml-1 w-[50%] md:w-[70%] rounded-md" />
        <div className="flex justify-between px-2 items-center">
          <Skeleton className="h-2 ml-1 w-[30%] rounded-md" />
          <Skeleton className="h-16  w-16 rounded-xl" />
        </div>
      </div>
    </div>
  );
};

export default UserMontlyActivitySkeleton;