import { cn } from '@/lib/utils';
import Skeleton from './Skeleton';

interface SkeletonTableProps {
    /** Number of rows to show */
    rows?: number;
    /** Number of columns to show */
    columns?: number;
    /** Whether to show table header */
    showHeader?: boolean;
    /** Whether to show pagination */
    showPagination?: boolean;
    /** Whether to show bulk actions */
    showBulkActions?: boolean;
    /** Whether to show filters */
    showFilters?: boolean;
    /** Custom className */
    className?: string;
    /** Animation type */
    animation?: 'pulse' | 'wave' | 'none';
    /** Column widths as array of tailwind classes */
    columnWidths?: string[];
}

const SkeletonTable = ({
    rows = 5,
    columns = 5,
    showHeader = true,
    showPagination = true,
    showBulkActions = true,
    showFilters = true,
    className,
    animation = 'pulse',
    columnWidths = [],
}: SkeletonTableProps) => {
    const getColumnWidth = (index: number) => {
        return columnWidths[index] || 'w-full';
    };

    return (
        <div className={cn('space-y-4 rounded-lg border p-4', className)}>
            {/* Bulk Actions */}
            {showBulkActions && (
                <div className="flex items-center justify-between">
                    {showFilters && (
                        <div className="flex flex-wrap gap-2">
                            <Skeleton className="h-10 w-48" animation={animation} />
                            <Skeleton className="h-10 w-32" animation={animation} />
                            <Skeleton className="h-10 w-24" animation={animation} />
                        </div>
                    )}
                    <div className="flex gap-2">
                        <Skeleton className="h-9 w-24" animation={animation} />
                        <Skeleton className="h-9 w-20" animation={animation} />
                    </div>
                </div>
            )}

            {/* Table */}
            <div className="overflow-hidden rounded-lg border border-gray-200 dark:border-gray-700">
                {/* Header */}
                {showHeader && (
                    <div className="border-b border-gray-200 bg-gray-50 p-4 dark:border-gray-700 dark:bg-gray-800">
                        <div className="grid grid-cols-6 gap-4">
                            <Skeleton className="h-4 w-4 rounded" animation={animation} />
                            {Array.from({ length: columns - 1 }, (_, i) => (
                                <Skeleton key={i} className={cn('h-4', getColumnWidth(i + 1))} animation={animation} />
                            ))}
                        </div>
                    </div>
                )}

                {/* Rows */}
                <div className="divide-y divide-gray-200 dark:divide-gray-700">
                    {Array.from({ length: rows }, (_, rowIndex) => (
                        <div key={rowIndex} className="p-4">
                            <div className="grid grid-cols-6 items-center gap-4">
                                <Skeleton className="h-4 w-4 rounded" animation={animation} />
                                {Array.from({ length: columns - 1 }, (_, colIndex) => (
                                    <Skeleton key={colIndex} className={cn('h-4', getColumnWidth(colIndex + 1))} animation={animation} />
                                ))}
                            </div>
                        </div>
                    ))}
                </div>
            </div>

            {/* Pagination */}
            {showPagination && (
                <div className="flex items-center justify-between">
                    <Skeleton className="h-4 w-32" animation={animation} />
                    <div className="flex gap-2">
                        <Skeleton className="h-9 w-20" animation={animation} />
                        <Skeleton className="h-9 w-8" animation={animation} />
                        <Skeleton className="h-9 w-8" animation={animation} />
                        <Skeleton className="h-9 w-8" animation={animation} />
                        <Skeleton className="h-9 w-20" animation={animation} />
                    </div>
                </div>
            )}
        </div>
    );
};

export default SkeletonTable;