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

export interface SkeletonTableProps {
  rows?: number;
  columns?: number;
  showHeader?: boolean;
  animate?: boolean;
  className?: string;
}

export function SkeletonTable({
  rows = 5,
  columns = 4,
  showHeader = true,
  animate = true,
  className,
}: SkeletonTableProps) {
  return (
    <div
      className={cn(
        'overflow-hidden rounded-lg border border-gray-200 dark:border-gray-700',
        className
      )}
    >
      <table className="w-full">
        {showHeader && (
          <thead className="bg-gray-50 dark:bg-gray-800">
            <tr>
              {Array.from({ length: columns }).map((_, colIndex) => (
                <th key={colIndex} className="px-4 py-3">
                  <Skeleton
                    width="80%"
                    height="0.875rem"
                    rounded="sm"
                    animate={animate}
                  />
                </th>
              ))}
            </tr>
          </thead>
        )}
        <tbody className="bg-white dark:bg-gray-900">
          {Array.from({ length: rows }).map((_, rowIndex) => (
            <tr
              key={rowIndex}
              className="border-t border-gray-200 dark:border-gray-700"
            >
              {Array.from({ length: columns }).map((_, colIndex) => (
                <td key={colIndex} className="px-4 py-3">
                  <Skeleton
                    width={colIndex === 0 ? '90%' : '70%'}
                    height="1rem"
                    rounded="sm"
                    animate={animate}
                  />
                </td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

// Alternative: Simple row-based skeleton for lists
export interface SkeletonTableRowsProps {
  rows?: number;
  animate?: boolean;
  className?: string;
}

export function SkeletonTableRows({
  rows = 5,
  animate = true,
  className,
}: SkeletonTableRowsProps) {
  return (
    <div className={cn('space-y-2', className)}>
      {Array.from({ length: rows }).map((_, index) => (
        <div
          key={index}
          className="flex items-center gap-4 p-3 rounded-lg bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700"
        >
          <Skeleton
            width={40}
            height={40}
            rounded="full"
            animate={animate}
          />
          <div className="flex-1 space-y-2">
            <Skeleton
              width="60%"
              height="1rem"
              rounded="sm"
              animate={animate}
            />
            <Skeleton
              width="40%"
              height="0.75rem"
              rounded="sm"
              animate={animate}
            />
          </div>
          <Skeleton
            width={80}
            height="2rem"
            rounded="md"
            animate={animate}
          />
        </div>
      ))}
    </div>
  );
}