'use client'

import Skeleton from '../Skeleton'

interface AuthSkeletonProps {
    type?: 'login' | 'register' | 'forget'
}

export default function AuthSkeleton({ type = 'login' }: AuthSkeletonProps) {
    const isLogin = type === 'login'
    const isRegister = type === 'register'
    const isForget = type === 'forget'

    return (
        <div className="w-full">
            <div className="mx-auto w-full max-w-[560px]">
                <div className="w-full rounded-2xl bg-white dark:bg-[#0c0d0e] shadow-2xl border border-gray-200 dark:border-gray-800">
                    <div className="px-6 py-6">
                        {/* 標題和標籤 */}
                        <div className="flex items-center justify-between mb-6">
                            <Skeleton variant="rectangular" width={60} height={28} animation="shimmer" />
                            {(isLogin || isRegister) && (
                                <div className="flex items-center gap-2">
                                    <Skeleton variant="rectangular" width={60} height={36} animation="shimmer" />
                                    <Skeleton variant="rectangular" width={60} height={36} animation="shimmer" />
                                </div>
                            )}
                            {isForget && (
                                <Skeleton variant="rectangular" width={80} height={14} animation="shimmer" />
                            )}
                        </div>

                        {/* 忘記密碼的描述文字 */}
                        {isForget && (
                            <div className="mb-6">
                                <Skeleton variant="rectangular" width="100%" height={14} animation="shimmer" />
                            </div>
                        )}

                        {/* 表單欄位 */}
                        <div className="space-y-5">
                            {/* 第一個輸入框 */}
                            <div>
                                <Skeleton variant="rectangular" width={40} height={14} animation="shimmer" className="mb-2" />
                                <Skeleton variant="rectangular" width="100%" height={50} animation="shimmer" />
                            </div>

                            {/* 第二個輸入框（登入和註冊頁面會有） */}
                            {(isLogin || isRegister) && (
                                <div>
                                    <Skeleton variant="rectangular" width={40} height={14} animation="shimmer" className="mb-2" />
                                    <Skeleton variant="rectangular" width="100%" height={50} animation="shimmer" />
                                </div>
                            )}

                            {/* 第三個輸入框（僅註冊頁面會有） */}
                            {isRegister && (
                                <div>
                                    <Skeleton variant="rectangular" width={60} height={14} animation="shimmer" className="mb-2" />
                                    <Skeleton variant="rectangular" width="100%" height={50} animation="shimmer" />
                                </div>
                            )}

                            {/* 第四個輸入框（僅註冊頁面會有） */}
                            {isRegister && (
                                <div>
                                    <Skeleton variant="rectangular" width={50} height={14} animation="shimmer" className="mb-2" />
                                    <Skeleton variant="rectangular" width="100%" height={50} animation="shimmer" />
                                </div>
                            )}

                            {/* 複選框（僅註冊頁面會有） */}
                            {isRegister && (
                                <div className="pt-1">
                                    <div className="flex items-center gap-3">
                                        <Skeleton variant="rectangular" width={16} height={16} animation="shimmer" />
                                        <Skeleton variant="rectangular" width={180} height={14} animation="shimmer" />
                                    </div>
                                </div>
                            )}

                            {/* 提交按鈕 */}
                            <div className="pt-2">
                                <Skeleton variant="rectangular" width="100%" height={52} animation="shimmer" />
                            </div>

                            {/* 底部連結 */}
                            <div className="mt-3 flex items-center justify-between">
                                <Skeleton variant="rectangular" width={80} height={14} animation="shimmer" />
                                {(isLogin || isForget) && (
                                    <Skeleton variant="rectangular" width={100} height={14} animation="shimmer" />
                                )}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
}