'use client'

import Skeleton from '@/components/Skeleton'
import SettingsSidebarSkeleton from './SettingsSidebarSkeleton'

export default function LoginPageSkeleton() {
    return (
        <div className="flex-1 w-full max-w-[960px] mx-auto px-4 pt-[6rem] md:pt-[6rem] pb-10">
            <SettingsSidebarSkeleton />

            <div className="mt-8">
                <Skeleton variant="text" className="h-7 w-40 mb-6" />

                {/* 次分類 tab 骨架 */}
                <div className="flex gap-3 mb-6">
                    {Array.from({ length: 3 }).map((_, index) => (
                        <Skeleton key={index} className="h-9 w-24" />
                    ))}
                </div>

                {/* 卡片 + 表格骨架 */}
                <div className="bg-white dark:bg-[#0c0d0e] rounded-2xl border border-gray-200 dark:border-gray-700 p-4 md:p-6">
                    <div className="flex items-center justify-between mb-4">
                        <Skeleton variant="text" className="h-5 w-40" />
                        <Skeleton variant="text" className="h-4 w-16" />
                    </div>
                    <div className="space-y-3">
                        {Array.from({ length: 5 }).map((_, index) => (
                            <div key={index} className="flex items-center gap-4">
                                <Skeleton className="h-4 flex-1" />
                                <Skeleton className="h-4 w-32" />
                                <Skeleton className="h-4 w-20" />
                            </div>
                        ))}
                    </div>
                </div>
            </div>
        </div>
    )
}