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

interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {}

export function Skeleton({ className, ...props }: SkeletonProps) {
  return (
    <div
      className={cn('animate-pulse rounded-md bg-surface-muted', className)}
      {...props}
    />
  );
}

export function MessageSkeleton() {
  return (
    <div className="flex gap-3 animate-pulse">
      <div className="w-8 h-8 rounded-full bg-surface-muted" />
      <div className="flex-1 space-y-2">
        <div className="h-4 bg-surface-muted rounded w-1/4" />
        <div className="h-4 bg-surface-muted rounded w-3/4" />
        <div className="h-4 bg-surface-muted rounded w-1/2" />
      </div>
    </div>
  );
}

export function SessionSkeleton() {
  return (
    <div className="px-2 py-2 animate-pulse">
      <div className="h-10 bg-surface-muted rounded-lg" />
    </div>
  );
}

export function FileSkeleton() {
  return (
    <div className="px-3 py-2 animate-pulse">
      <div className="flex items-center gap-2">
        <div className="w-4 h-4 bg-surface-muted rounded" />
        <div className="h-4 bg-surface-muted rounded flex-1" />
      </div>
    </div>
  );
}
