/**
 * @ai-summary Skeleton loading components for admin views
 * @ai-context Provides skeleton rows for tables and cards for mobile views
 */

import React from 'react';
import { Box, Skeleton, Card, CardContent } from '@mui/material';

/**
 * Props for SkeletonRow component
 */
interface SkeletonRowProps {
  count?: number;
}

/**
 * Skeleton loading rows for table views
 *
 * @example
 * ```tsx
 * <AdminSkeleton.SkeletonRow count={5} />
 * ```
 */
const SkeletonRow: React.FC<SkeletonRowProps> = ({ count = 3 }) => {
  return (
    <Box sx={{ p: 2 }}>
      {Array.from({ length: count }).map((_, index) => (
        <Box
          key={index}
          sx={{
            display: 'flex',
            gap: 2,
            mb: 2,
            alignItems: 'center',
          }}
        >
          <Skeleton variant="rectangular" width={40} height={40} />
          <Box sx={{ flex: 1 }}>
            <Skeleton variant="text" width="60%" height={24} />
            <Skeleton variant="text" width="40%" height={20} />
          </Box>
          <Skeleton variant="rectangular" width={80} height={32} />
        </Box>
      ))}
    </Box>
  );
};

/**
 * Props for SkeletonCard component
 */
interface SkeletonCardProps {
  count?: number;
}

/**
 * Skeleton loading cards for mobile views
 *
 * @example
 * ```tsx
 * <AdminSkeleton.SkeletonCard count={3} />
 * ```
 */
const SkeletonCard: React.FC<SkeletonCardProps> = ({ count = 3 }) => {
  return (
    <Box>
      {Array.from({ length: count }).map((_, index) => (
        <Card key={index} sx={{ mb: 2 }}>
          <CardContent>
            <Box sx={{ display: 'flex', gap: 2, mb: 2 }}>
              <Skeleton variant="rectangular" width={40} height={40} />
              <Box sx={{ flex: 1 }}>
                <Skeleton variant="text" width="70%" height={24} />
                <Skeleton variant="text" width="50%" height={20} />
              </Box>
            </Box>
            <Box sx={{ display: 'flex', gap: 1 }}>
              <Skeleton variant="rectangular" width={80} height={36} />
              <Skeleton variant="rectangular" width={80} height={36} />
            </Box>
          </CardContent>
        </Card>
      ))}
    </Box>
  );
};

/**
 * Admin skeleton loading components
 */
export const AdminSkeleton = {
  SkeletonRow,
  SkeletonCard,
};
