import React from "react";

export default function UserProfileSkeleton() {
  return (
    <div className="bg-white min-h-screen p-6">
      <div className="mt-6 bg-white p-6  rounded-lg flex gap-4 items-center">
        <div className="h-64 w-60 bg-gray-300 animate-pulse rounded"></div>
        <div className="flex-1">
          <div className="h-12 w-64 bg-gray-300 animate-pulse rounded"></div>
          <div className="flex justify-between items-center mt-1">
            <div className="h-4 w-60 bg-gray-300 animate-pulse mt-2 rounded"></div>
            <div className="h-8 w-32 bg-gray-300 animate-pulse mt-2 rounded"></div>
          </div>
          <div className="h-4 w-100 bg-gray-300 animate-pulse mt-2 rounded"></div>
          <div className="mt-6 grid grid-cols-4 justify-item-start gap-4">
          <div className="bg-white p-4 rounded-lg text-center flex flex-row items-center justify-center">
              <div className="h-12 w-12 mx-2  bg-gray-300 animate-pulse rounded"></div>
              <div className="flex flex-col">
                <div className="h-4 w-4 bg-gray-300 animate-pulse mt-2 rounded"></div>
                <div className="h-4 w-16 bg-gray-300 animate-pulse mt-2 rounded"></div>
              </div>
            </div>
            <div className="bg-white p-4 rounded-lg text-center flex flex-row items-center justify-center">
              <div className="h-12 w-12 mx-2  bg-gray-300 animate-pulse rounded"></div>
              <div className="flex flex-col">
                <div className="h-4 w-4 bg-gray-300 animate-pulse mt-2 rounded"></div>
                <div className="h-4 w-16 bg-gray-300 animate-pulse mt-2 rounded"></div>
              </div>
            </div>
            <div className="bg-white p-4 rounded-lg text-center flex flex-row items-center justify-center">
              <div className="h-12 w-12 mx-2  bg-gray-300 animate-pulse rounded"></div>
              <div className="flex flex-col">
                <div className="h-4 w-4 bg-gray-300 animate-pulse mt-2 rounded"></div>
                <div className="h-4 w-16 bg-gray-300 animate-pulse mt-2 rounded"></div>
              </div>
            </div>
            <div className="bg-white p-4 rounded-lg text-center flex flex-row items-center justify-center">
              <div className="h-12 w-12 mx-2  bg-gray-300 animate-pulse rounded"></div>
              <div className="flex flex-col">
                <div className="h-4 w-4 bg-gray-300 animate-pulse mt-2 rounded"></div>
                <div className="h-4 w-16 bg-gray-300 animate-pulse mt-2 rounded"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div className="mt-6 bg-white p-6 rounded-lg">
        <div className="h-6 w-40 bg-gray-300 animate-pulse rounded mb-4"></div>
        <div className="space-y-4">
          {[...Array(4)].map((_, i) => (
            <div key={i} className="flex justify-between items-center">
              <div className="h-4 w-24 bg-gray-300 animate-pulse rounded"></div>
              <div className="h-2 w-3/4 bg-gray-300 animate-pulse rounded"></div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}