import { motion } from 'framer-motion';
import React from 'react';

// Loading Preview Card Component with Skeleton
export const LoadingPreviewCard: React.FC = () => {
  return (
    <motion.div
      initial={{ opacity: 0, scale: 0.95 }}
      animate={{ opacity: 1, scale: 1 }}
      exit={{ opacity: 0, scale: 0.95 }}
      className='w-full max-w-[984px] overflow-hidden rounded-[16px] border border-white/10 p-4 backdrop-blur-[50px]'
    >
      <div className='flex gap-4 md:flex-row md:gap-6'>
        {/* Left Section: Album Art + Content Skeleton */}
        <div className='flex flex-row gap-4 md:flex-row md:items-start'>
          {/* Album Art Skeleton */}
          <div className='h-[86px] w-[67px] flex-shrink-0 animate-pulse-opacity rounded-[12px] bg-white/[0.04]' />

          {/* Content Skeleton */}
          <div className='flex flex-col'>
            {/* Title Skeleton */}
            <div className='h-[24px] w-[154px] animate-pulse-opacity rounded-[8px] bg-white/[0.04]' />

            {/* Styles Skeleton */}
            <div className='mt-2 h-[16px] w-[102px] animate-pulse-opacity rounded-[8px] bg-white/[0.04]' />

            {/* Reaction Buttons Skeleton */}
            <div className='mt-3 flex items-center gap-2'>
              <div className='h-[32px] w-[32px] animate-pulse-opacity rounded-full bg-white/[0.04]' />
              <div className='h-[32px] w-[32px] animate-pulse-opacity rounded-full bg-white/[0.04]' />
              <div className='h-[32px] w-[32px] animate-pulse-opacity rounded-full bg-white/[0.04]' />
            </div>
          </div>
        </div>

        {/* Right Section: Waveform Skeleton */}
        <div className='flex max-w-[324px] items-center gap-3 md:ml-auto'>
          {/* Play Button Skeleton */}
          <div className='h-[36px] w-[36px] flex-shrink-0 animate-pulse-opacity rounded-full bg-white/[0.04]' />

          {/* Waveform Area Skeleton */}
          <div className='h-[48px] w-[280px] animate-pulse-opacity rounded-[8px] bg-white/[0.04]' />
        </div>
      </div>
    </motion.div>
  );
};