import React from 'react';
import { View } from '@tarojs/components';
import './index.scss';

interface LoadingCardProps {
  count?: number;
  layout?: 'card' | 'list' | 'detail';
}

const LoadingCard: React.FC<LoadingCardProps> = ({
  count = 3,
  layout = 'card',
}) => {
  return (
    <View className={`loading-card-group loading-card-group--${layout}`} role="status" aria-label="内容加载中">
      {Array.from({ length: count }, (_, i) => (
        <View key={i} className="loading-card">
          {layout === 'card' && (
            <>
              <View className="loading-card__line loading-card__line--title" />
              <View className="loading-card__line loading-card__line--text" />
              <View className="loading-card__line loading-card__line--short" />
            </>
          )}
          {layout === 'list' && (
            <View className="loading-card__row">
              <View className="loading-card__circle" />
              <View className="loading-card__lines">
                <View className="loading-card__line loading-card__line--title" />
                <View className="loading-card__line loading-card__line--short" />
              </View>
            </View>
          )}
          {layout === 'detail' && (
            <>
              <View className="loading-card__line loading-card__line--title" />
              <View className="loading-card__line loading-card__line--text" />
              <View className="loading-card__line loading-card__line--text" />
              <View className="loading-card__line loading-card__line--short" />
            </>
          )}
        </View>
      ))}
    </View>
  );
};

export default React.memo(LoadingCard);