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

export default function BlogPostLoading() {
    return (
        <div className="page-frame py-20 sm:py-24">
            <div className="mx-auto max-w-[70rem] 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" style={{ width }} />
                        ))}
                    </div>
                </div>
            </div>
        </div>
    );
}