import { FC } from 'react'

const SupportSkeleton: FC = () => {
    return (
        <div className='mt-4'>
            <div className='flex gap-6 xl:mt-8 mt-4'>
                <div className='flex-1 bg-white py-8 xl:px-10 px-4 rounded-3xl'>
                    {/* Desktop View */}
                    <div className='xl:flex hidden justify-between mt-10'>
                        <div className='flex-1 flex justify-center'>
                            <div className='w-[160px] h-[160px] bg-gray-200 rounded-xl animate-pulse' />
                        </div>

                        {[1, 2, 3].map((item) => (
                            <div key={item} className='flex-1 flex flex-col items-center'>
                                <div className='text-center w-full'>
                                    <div className='h-6 w-32 bg-gray-200 rounded-lg animate-pulse mx-auto' />
                                    <div className='h-4 w-20 bg-gray-200 rounded-lg animate-pulse mx-auto mt-4' />
                                    <div className='h-5 w-24 bg-gray-200 rounded-lg animate-pulse mx-auto mt-1' />
                                    <div className='h-4 w-16 bg-gray-200 rounded-lg animate-pulse mx-auto mt-1' />
                                    <div className='h-10 w-28 bg-gray-200 rounded-lg animate-pulse mx-auto mt-4' />
                                </div>
                            </div>
                        ))}
                    </div>

                    <div className='xl:flex hidden flex-1 mt-5'>
                        <div className='flex-1 flex flex-col'>
                            {[1, 2, 3, 4, 5].map((item) => (
                                <div key={item} className='flex h-16 px-4 plan items-center justify-between'>
                                    <div className='flex-1 flex items-center gap-2'>
                                        <div className='size-8 rounded-2.5 bg-gray-200 animate-pulse' />
                                        <div className='h-4 w-32 bg-gray-200 rounded-lg animate-pulse' />
                                    </div>
                                </div>
                            ))}
                        </div>
                        {[1, 2, 3].map((item) => (
                            <div key={item} className='flex-1 flex flex-col'>
                                {[1, 2, 3, 4, 5].map((feature) => (
                                    <div key={feature} className='flex h-16 px-4 plan items-center justify-center'>
                                        <div className='size-8 bg-gray-200 rounded-full animate-pulse' />
                                    </div>
                                ))}
                            </div>
                        ))}
                    </div>

                    {/* Mobile View */}
                    <div className='xl:hidden block mt-5'>
                        <div className='flex justify-center mb-6'>
                            <div className='w-[120px] h-[120px] bg-gray-200 rounded-xl animate-pulse' />
                        </div>
                        <div className='text-center mb-6'>
                            <div className='h-6 w-40 bg-gray-200 rounded-lg animate-pulse mx-auto' />
                            <div className='h-4 w-24 bg-gray-200 rounded-lg animate-pulse mx-auto mt-2' />
                            <div className='h-5 w-32 bg-gray-200 rounded-lg animate-pulse mx-auto mt-1' />
                            <div className='h-4 w-20 bg-gray-200 rounded-lg animate-pulse mx-auto mt-1' />
                            <div className='h-10 w-32 bg-gray-200 rounded-lg animate-pulse mx-auto mt-4' />
                        </div>
                        <div className='space-y-4'>
                            {[1, 2, 3, 4, 5].map((item) => (
                                <div key={item} className='flex items-center justify-between p-4 bg-gray-50 rounded-xl'>
                                    <div className='flex items-center gap-2'>
                                        <div className='size-8 rounded-2.5 bg-gray-200 animate-pulse' />
                                        <div className='h-4 w-32 bg-gray-200 rounded-lg animate-pulse' />
                                    </div>
                                    <div className='size-6 bg-gray-200 rounded-full animate-pulse' />
                                </div>
                            ))}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default SupportSkeleton 