const TableRateShippingSettingsSkeleton = () => {
    return (
        <div className="space-y-6 mt-6">
            <div className="space-y-4 mb-4">
                <div className="h-4 w-full bg-gray-200 rounded animate-pulse" />
                <div className="h-4 w-[80%] bg-gray-200 rounded animate-pulse" />
            </div>
            <div className="space-y-6">
                { /* Method Title Skeleton */ }
                <div className="flex gap-6">
                    <div className="h-full">
                        <div className="flex items-center">
                            <div className="h-10 w-32 bg-gray-200 rounded animate-pulse" />
                            <div className="ml-2 h-8 w-8 bg-gray-200 rounded-full animate-pulse" />
                        </div>
                    </div>
                    <div className="h-10 w-full bg-gray-200 rounded animate-pulse" />
                </div>

                { /* Tax Status Skeleton */ }
                <div className="flex gap-6">
                    <div className="h-full">
                        <div className="flex items-center">
                            <div className="h-10 w-32 bg-gray-200 rounded animate-pulse" />
                            <div className="ml-2 h-8 w-8 bg-gray-200 rounded-full animate-pulse" />
                        </div>
                    </div>
                    <div className="h-10 w-full bg-gray-200 rounded animate-pulse" />
                </div>

                { /* Handling Fee Skeleton */ }
                <div className="flex gap-6">
                    <div className="h-full">
                        <div className="flex items-center">
                            <div className="h-10 w-32 bg-gray-200 rounded animate-pulse" />
                            <div className="ml-2 h-8 w-8 bg-gray-200 rounded-full animate-pulse" />
                        </div>
                    </div>
                    <div className="h-10 w-full bg-gray-200 rounded animate-pulse" />
                </div>

                { /* Calculation Type Skeleton */ }
                <div className="flex gap-6">
                    <div className="h-full">
                        <div className="flex items-center">
                            <div className="h-10 w-32 bg-gray-200 rounded animate-pulse" />
                            <div className="ml-2 h-8 w-8 bg-gray-200 rounded-full animate-pulse" />
                        </div>
                    </div>
                    <div className="h-10 w-full bg-gray-200 rounded animate-pulse" />
                </div>
            </div>

            <div className="space-y-4 my-4">
                <div className="h-4 w-full bg-gray-200 rounded animate-pulse" />
                <div className="h-4 w-[80%] bg-gray-200 rounded animate-pulse" />
            </div>
            <div className="space-y-6">
                { /* Method Title Skeleton */ }
                <div className="flex gap-6">
                    <div className="h-full">
                        <div className="flex items-center">
                            <div className="h-10 w-32 bg-gray-200 rounded animate-pulse" />
                            <div className="ml-2 h-8 w-8 bg-gray-200 rounded-full animate-pulse" />
                        </div>
                    </div>
                    <div className="h-10 w-full bg-gray-200 rounded animate-pulse" />
                </div>

                { /* Tax Status Skeleton */ }
                <div className="flex gap-6">
                    <div className="h-full">
                        <div className="flex items-center">
                            <div className="h-10 w-32 bg-gray-200 rounded animate-pulse" />
                            <div className="ml-2 h-8 w-8 bg-gray-200 rounded-full animate-pulse" />
                        </div>
                    </div>
                    <div className="h-10 w-full bg-gray-200 rounded animate-pulse" />
                </div>

                { /* Handling Fee Skeleton */ }
                <div className="flex gap-6">
                    <div className="h-full">
                        <div className="flex items-center">
                            <div className="h-10 w-32 bg-gray-200 rounded animate-pulse" />
                            <div className="ml-2 h-8 w-8 bg-gray-200 rounded-full animate-pulse" />
                        </div>
                    </div>
                    <div className="h-10 w-full bg-gray-200 rounded animate-pulse" />
                </div>
            </div>

            { /* Save Button Skeleton */ }
            <div className="flex justify-end">
                <div className="h-10 w-40 bg-gray-200 rounded animate-pulse" />
            </div>
        </div>
    );
};

export default TableRateShippingSettingsSkeleton;
