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

export default function Loading() {
  return (
    <div className="padding-responsive pt-[84px] sm:pt-[110px] md:pt-[140px] lg:pt-[168px]">
      <Skeleton variant="rounded" width={300} height={16} />
      <Skeleton variant="rounded" width={400} height={28} className="mt-[24px] sm:mt-[29px] md:mt-[35px] lg:mt-[40px]" />
      <div className="flex items-center gap-[35px] mt-[16px] sm:mt-[18px] md:mt-[21px] lg:mt-[24px]">
        <Skeleton variant="rounded" width={120} height={16} />
        <Skeleton variant="rounded" width={140} height={16} />
      </div>
      <div className="flex flex-col gap-y-[32px] lg:flex-row items-start justify-center gap-[24px] mt-[16px] sm:mt-[19px] md:mt-[21px] lg:mt-[24px]">
        <div className="w-full flex flex-col gap-3">
          <Skeleton variant="rounded" height={280} className="!rounded-lg" />
          <Skeleton variant="rounded" height={20} className="!w-full" />
          <Skeleton variant="rounded" height={20} className="!w-full" />
          <Skeleton variant="rounded" height={20} width={300} />
        </div>
        <Skeleton variant="rounded" width={320} height={300} className="!rounded-lg shrink-0" />
      </div>
    </div>
  );
}
