'use client';

export function SkeletonClientCard() {
  return (
    <div className="card p-5 flex flex-col gap-3">
      <div className="flex items-center gap-3">
        <div className="skeleton w-11 h-11 rounded-xl" />
        <div className="flex-1 space-y-2">
          <div className="skeleton h-4 w-32 rounded" />
          <div className="skeleton h-3 w-24 rounded" />
        </div>
        <div className="skeleton h-5 w-16 rounded-full" />
      </div>
      <div className="space-y-1.5">
        <div className="flex justify-between">
          <div className="skeleton h-3 w-20 rounded" />
          <div className="skeleton h-3 w-16 rounded" />
        </div>
        <div className="skeleton h-1.5 w-full rounded-full" />
      </div>
      <div className="skeleton h-3 w-28 rounded" />
      <div className="skeleton h-8 w-full rounded-xl" />
    </div>
  );
}

export function SkeletonStatsCard() {
  return (
    <div className="card p-5 flex items-center gap-4">
      <div className="skeleton w-12 h-12 rounded-xl" />
      <div className="space-y-2">
        <div className="skeleton h-6 w-16 rounded" />
        <div className="skeleton h-3 w-24 rounded" />
      </div>
    </div>
  );
}

export function SkeletonMessage({ isUser = false }: { isUser?: boolean }) {
  return (
    <div className={`flex ${isUser ? 'justify-end' : 'justify-start'} gap-2`}>
      {!isUser && <div className="skeleton w-7 h-7 rounded-full flex-shrink-0" />}
      <div className={`skeleton rounded-2xl ${isUser ? 'w-48 h-12' : 'w-64 h-16'}`} />
    </div>
  );
}