import { FC } from 'react'

const SkeletonDetail: FC = () => {
    return (
        <div className='bg-white rounded-4xl p-8'>
            <div className='animate-pulse'>
                {/* Header Skeleton */}
                <div className='h-6 bg-gray-200 rounded w-48 mb-6'></div>

                {/* Subject and Tags Section */}
                <div className='mt-6 flex xl:flex-row flex-col justify-between xl:items-center'>
                    <div className='flex xl:flex-row flex-col-reverse gap-4 xl:items-center'>
                        <div className='flex gap-1 items-center'>
                            <div className='h-4 bg-gray-200 rounded w-12 hidden xl:block'></div>
                            <div className='h-5 bg-gray-200 rounded w-40'></div>
                        </div>
                        <div className='flex gap-2'>
                            <div className='h-6 xl:h-10 bg-gray-200 rounded-full w-20'></div>
                            <div className='h-6 xl:h-10 bg-gray-200 rounded-full w-24'></div>
                        </div>
                    </div>
                    <div className='h-4 bg-gray-200 rounded w-24'></div>
                </div>

                {/* Sender Info */}
                <div className='mt-6 flex gap-4 items-center'>
                    <div className='size-10 bg-gray-200 rounded-full'></div>
                    <div className='h-4 bg-gray-200 rounded w-32'></div>
                </div>

                {/* Email Content */}
                <div className='xl:mt-8 mt-3 space-y-3'>
                    <div className='h-4 bg-gray-200 rounded w-full'></div>
                    <div className='h-4 bg-gray-200 rounded w-full'></div>
                    <div className='h-4 bg-gray-200 rounded w-3/4'></div>
                    <div className='h-4 bg-gray-200 rounded w-full'></div>
                    <div className='h-4 bg-gray-200 rounded w-2/3'></div>
                </div>

                {/* Attachments Section */}
                <div className='mt-10'>
                    <div className='h-4 bg-gray-200 rounded w-20 mb-4'></div>
                    <div className='flex border-b border-gray-200 pb-10 mt-4 flex-wrap gap-2.5 items-center'>
                        <div className='h-10 bg-gray-200 rounded-full w-36'></div>
                    </div>
                </div>

                {/* Action Buttons */}
                <div className='flex mt-9 justify-end'>
                    <div className='flex gap-5'>
                        <div className='size-6 bg-gray-200 rounded'></div>
                        <div className='flex gap-2 items-center border-r border-gray-200 pr-5'>
                            <div className='w-[17px] h-[17px] bg-gray-200 rounded'></div>
                            <div className='h-4 bg-gray-200 rounded w-12'></div>
                        </div>
                        <div className='flex gap-2 items-center border-r border-gray-200 pr-5'>
                            <div className='w-[17px] h-[17px] bg-gray-200 rounded'></div>
                            <div className='h-4 bg-gray-200 rounded w-16'></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default SkeletonDetail