'use client'

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

export default function NotificationsPageSkeleton() {
    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 space-y-6">
                {/* 桌面通知卡片骨架 */}
                <div className="bg-white dark:bg-[#0c0d0e] rounded-2xl border border-gray-200 dark:border-gray-700 p-4 md:p-6">
                    <Skeleton variant="text" className="h-6 w-40 mb-4" />
                    <Skeleton className="h-4 w-64 mb-2" />
                    <Skeleton className="h-4 w-56 mb-4" />
                    <div className="flex items-center justify-between mt-4">
                        <div className="flex items-center gap-3">
                            <Skeleton variant="circular" width={32} height={32} />
                            <Skeleton className="h-4 w-40" />
                        </div>
                        <Skeleton className="h-5 w-10 rounded-full" />
                    </div>
                </div>

                {/* 通知內容設定卡片骨架 */}
                <div className="bg-white dark:bg-[#0c0d0e] rounded-2xl border border-gray-200 dark:border-gray-700 p-4 md:p-6">
                    <Skeleton variant="text" className="h-6 w-48 mb-4" />
                    <Skeleton className="h-4 w-64 mb-2" />
                    <Skeleton className="h-4 w-56 mb-6" />
                    {Array.from({ length: 4 }).map((_, index) => (
                        <div key={index} className="flex items-center justify-between mt-3">
                            <Skeleton className="h-4 w-56" />
                            <div className="flex gap-4">
                                <Skeleton className="h-5 w-10 rounded-full" />
                                <Skeleton className="h-5 w-10 rounded-full" />
                            </div>
                        </div>
                    ))}
                </div>
            </div>
        </div>
    )
}