import React from 'react';

interface TableSkeletonProps {
    columns?: number;
    rows?: number;
    showMobileCards?: boolean;
    className?: string;
}

export const TableSkeleton: React.FC<TableSkeletonProps> = ({
    columns = 5,
    rows = 5,
    showMobileCards = true,
    className = '',
}) => {
    return (
        <div className={`bg-white dark:bg-gray-800 shadow-sm border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden ${className}`}>
            {/* Desktop Table Skeleton */}
            <div className="hidden md:block">
                <div className="overflow-x-auto">
                    <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
                        <thead className="bg-gray-50 dark:bg-gray-700">
                            <tr>
                                {[...Array(columns)].map((_, i) => (
                                    <th
                                        key={i}
                                        className="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider"
                                    >
                                        <div className="h-4 bg-gray-200 dark:bg-gray-600 rounded w-24 animate-pulse"></div>
                                    </th>
                                ))}
                            </tr>
                        </thead>
                        <tbody className="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
                            {[...Array(rows)].map((_, rowIndex) => (
                                <tr key={rowIndex}>
                                    {[...Array(columns)].map((_, colIndex) => (
                                        <td key={colIndex} className="px-6 py-4 whitespace-nowrap">
                                            {colIndex === columns - 1 ? (
                                                <div className="flex gap-2">
                                                    <div className="h-8 w-8 bg-gray-200 dark:bg-gray-600 rounded animate-pulse"></div>
                                                    <div className="h-8 w-8 bg-gray-200 dark:bg-gray-600 rounded animate-pulse"></div>
                                                </div>
                                            ) : (
                                                <div className="h-4 bg-gray-200 dark:bg-gray-600 rounded animate-pulse w-32"></div>
                                            )}
                                        </td>
                                    ))}
                                </tr>
                            ))}
                        </tbody>
                    </table>
                </div>
            </div>

            {/* Mobile Cards Skeleton */}
            {showMobileCards && (
                <div className="md:hidden p-4 space-y-4">
                    {[...Array(Math.min(rows, 3))].map((_, index) => (
                        <div
                            key={index}
                            className="border border-gray-200 dark:border-gray-700 rounded-lg p-4 animate-pulse"
                        >
                            <div className="space-y-3">
                                <div className="h-5 bg-gray-300 dark:bg-gray-600 rounded w-3/4"></div>
                                <div className="h-4 bg-gray-300 dark:bg-gray-600 rounded w-full"></div>
                                <div className="h-3 bg-gray-300 dark:bg-gray-600 rounded w-1/3"></div>
                                <div className="flex gap-2 pt-2">
                                    <div className="h-8 w-8 bg-gray-300 dark:bg-gray-600 rounded"></div>
                                    <div className="h-8 w-8 bg-gray-300 dark:bg-gray-600 rounded"></div>
                                </div>
                            </div>
                        </div>
                    ))}
                </div>
            )}
        </div>
    );
};

