import { Skeleton } from "@mui/material";

export default function Loading() {
  return (
    <div>
      <Skeleton variant="rounded" width={150} height={24} className="my-[16px] md:my-[20px] lg:my-[24px]" />
      <ul className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-[16px] md:gap-[20px] lg:gap-[24px]">
        {Array.from({ length: 6 }).map((_, idx) => (
          <li
            key={idx}
            className="rounded-[8px] overflow-hidden bg-[#FFF] shadow-[0px_0px_41px_0px_rgba(173,_181,_189,_0.15)]"
          >
            <Skeleton variant="rectangular" width="100%" height={217} />
            <div className="p-[12px] md:p-[14px] lg:p-[16px]">
              <Skeleton variant="rounded" width={150} height={18} className="mb-3" />
              <div className="flex items-center justify-start gap-[16px]">
                <Skeleton variant="rounded" width={100} height={18} />
                <Skeleton variant="rounded" width={110} height={18} />
              </div>
            </div>
          </li>
        ))}
      </ul>
    </div>
  );
}