const lineWidths = ['w-[78%]', 'w-[92%]', 'w-[85%]', 'w-[88%]', 'w-[74%]', 'w-[96%]', 'w-[82%]', 'w-[69%]'];

export default function BlogPostLoading() {
    return (
        <div className="page-frame py-20 sm:py-24">
            <div className="mx-auto max-w-[70rem] motion-safe:animate-pulse xl:grid xl:grid-cols-[11rem_minmax(0,44rem)] xl:gap-x-10">
                <div className="hidden xl:block" />
                <div>
                    <div className="mb-8 space-y-4 border-b border-line pb-8">
                        <div className="h-3 w-1/3 rounded-full bg-accent-soft" />
                        <div className="h-14 w-3/4 rounded-[1rem] bg-paper-strong" />
                        <div className="h-5 w-2/3 rounded-full bg-paper-strong" />
                    </div>
                    <div className="space-y-4">
                        {lineWidths.map((width) => (
                            <div key={width} className={`h-4 rounded-full bg-paper-strong ${width}`} />
                        ))}
                    </div>
                </div>
            </div>
        </div>
    );
}