'use client';

import { Skeleton } from '@/components/common/Skeleton';

/**
 * SessionCardSkeleton Component
 * 
 * Skeleton loader untuk SessionCard yang meniru struktur layout asli.
 * Digunakan saat loading initial sessions atau load more sessions.
 */
export default function SessionCardSkeleton() {
  return (
    <div className="w-full bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700">
      <div className="p-4">
        <div className="flex items-center justify-between">
          <div className="flex items-center space-x-4">
            {/* Session Icon Skeleton */}
            <Skeleton 
              variant="avatar" 
              className="w-12 h-12"
            />
            
            {/* Session Info Skeleton */}
            <div className="space-y-2">
              <Skeleton className="h-5 w-32" />
              <Skeleton className="h-4 w-48" />
              <Skeleton className="h-3 w-36" />
            </div>
          </div>

          {/* Middle Info Skeleton (hidden on mobile) */}
          <div className="hidden sm:flex items-center space-x-8">
            <div className="text-center space-y-1">
              <Skeleton className="h-4 w-16 mx-auto" />
              <Skeleton className="h-3 w-12 mx-auto" />
            </div>
            
            <div className="text-center space-y-1">
              <Skeleton className="h-4 w-20 mx-auto" />
              <Skeleton className="h-3 w-12 mx-auto" />
            </div>
          </div>

          {/* Right Side Skeleton */}
          <div className="flex items-center space-x-3">
            <Skeleton className="h-6 w-16 rounded-full" />
            <Skeleton className="h-5 w-5" />
          </div>
        </div>

        {/* Mobile Info Skeleton */}
        <div className="sm:hidden mt-3 flex justify-between">
          <Skeleton className="h-4 w-20" />
          <Skeleton className="h-4 w-24" />
        </div>
      </div>
    </div>
  );
}