import type { FC } from 'react';
import { cn } from '../../lib/utils';

interface SkeletonProps {
  className?: string;
  count?: number;
}

export const Skeleton: FC<SkeletonProps> = ({ className, count = 1 }) => {
  return (
    <div className="space-y-2 animate-pulse">
      {Array.from({ length: count }).map((_, i) => (
        <div
          key={i}
          className={cn('rounded-xl bg-theme-border-strong', className)}
        />
      ))}
    </div>
  );
};

export const SkeletonCard: FC<{ lines?: number; className?: string }> = ({
  lines = 3,
  className,
}) => {
  return (
    <div className={cn('bg-theme-surface rounded-2xl p-4 sm:p-6 border border-theme-border shadow-sm', className)}>
      <div className="flex items-center justify-between mb-4">
        <Skeleton className="h-5 w-1/3" />
        <Skeleton className="h-4 w-16" />
      </div>
      <div className="space-y-3">
        {Array.from({ length: lines }).map((_, i) => (
          <Skeleton key={i} className="h-12 w-full" />
        ))}
      </div>
    </div>
  );
};

export const SkeletonStat: FC = () => (
  <div className="bg-theme-surface rounded-2xl p-5 border border-theme-border shadow-sm">
    <div className="flex items-center justify-between mb-4">
      <Skeleton className="h-9 w-9 rounded-full" />
      <Skeleton className="h-4 w-12" />
    </div>
    <Skeleton className="h-3 w-20 mb-2" />
    <Skeleton className="h-7 w-24" />
  </div>
);

export default Skeleton;