frontend-react/src/components/common/SkeletonLoader.tsx

import React from 'react';

interface SkeletonProps {
    count?: number;
    height?: string;
    width?: string;
    borderRadius?: string;
    className?: string;
    style?: React.CSSProperties;
}

export const SkeletonLoader: React.FC<SkeletonProps> = ({
    count = 1,
    height = '140px',
    width = '100%',
    borderRadius = '14px',
    className = '',
    style = {}
}) => {
    return (
        <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem', width: '100%' }} className={className}>
            {Array.from({ length: count }).map((_, i) => (
                <div
                    key={i}
                    style={{
                        background: 'var(--bg-elevated, #f3f4f6)',
                        border: '1px solid var(--border-subtle, #e5e7eb)',
                        borderRadius,
                        height,
                        width,
                        animation: 'pulse 1.5s ease-in-out infinite',
                        opacity: 0.6,
                        ...style
                    }}
                />
            ))}
            <style>{`
                @keyframes pulse {
                    0%, 100% { opacity: 0.6; }
                    50% { opacity: 0.3; }
                }
            `}</style>
        </div>
    );
};