import React from 'react';

export function SkeletonLine({ className = '' }: { className?: string }) {
    return <div className={`h-4 bg-gray-200 dark:bg-gray-700 rounded animate-pulse ${className}`} />;
}

export function SkeletonCard() {
    return (
        <div className="card space-y-3 animate-pulse">
            <div className="flex items-center gap-3">
                <div className="w-10 h-10 bg-gray-200 dark:bg-gray-700 rounded-xl" />
                <div className="flex-1 space-y-2">
                    <div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-3/4" />
                    <div className="h-3 bg-gray-200 dark:bg-gray-700 rounded w-1/2" />
                </div>
                <div className="h-5 bg-gray-200 dark:bg-gray-700 rounded w-16" />
            </div>
        </div>
    );
}

export function SkeletonChart() {
    return (
        <div className="card">
            <div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-40 mb-4" />
            <div className="h-48 bg-gray-100 dark:bg-gray-700/50 rounded-xl flex items-center justify-center">
                <div className="w-8 h-8 border-4 border-teal-600 border-t-transparent rounded-full animate-spin" />
            </div>
        </div>
    );
}
