import { SectionSkeleton } from './section-skeleton';
import { AddressListSkeleton } from './address-skeleton';
import { SummarySkeleton } from './summary-skeleton';

export const CheckoutOnePageSkeleton = () => (
  <div className="min-h-screen bg-[#fafafa] pb-20 md:pb-16">
    <div className="container w-full px-4 pt-6 md:px-6 md:pt-10 lg:px-8">
      <div className="flex flex-col gap-6 lg:flex-row lg:items-start lg:gap-8">
        <div className="w-full lg:w-2/3">
          <SectionSkeleton />
          <SectionSkeleton active>
            <AddressListSkeleton />
          </SectionSkeleton>
          <SectionSkeleton />
          <SectionSkeleton />
        </div>
        <aside className="hidden w-full lg:block lg:w-1/3">
          <div className="sticky top-6">
            <SummarySkeleton />
          </div>
        </aside>
      </div>
    </div>
  </div>
);

export default CheckoutOnePageSkeleton;