export function Skeleton({ className = '' }: { className?: string }) {
  return <div className={`animate-pulse bg-slate-200 rounded ${className}`} />;
}

export function SkeletonText({ lines = 3 }: { lines?: number }) {
  return (
    <div className="space-y-2">
      {Array.from({ length: lines }).map((_, i) => (
        <Skeleton
          key={i}
          className={`h-3 ${i === lines - 1 ? 'w-2/3' : 'w-full'}`}
        />
      ))}
    </div>
  );
}

export function SkeletonDetailPanel() {
  return (
    <div className="space-y-4 p-1">
      <Skeleton className="h-4 w-1/2" />
      <Skeleton className="h-3 w-1/3" />
      <div className="pt-2">
        <SkeletonText lines={4} />
      </div>
    </div>
  );
}

/**
 * Chat-pane shaped placeholder. Used while task detail data is loading
 * and the chat itself can't yet be rendered. Avoids showing the
 * "select a thread" empty state when a thread IS selected.
 */
export function SkeletonChatPane() {
  return (
    <div className="flex flex-col h-full">
      <div className="flex-shrink-0 px-4 py-3 border-b border-hairline space-y-2">
        <Skeleton className="h-4 w-1/3" />
        <Skeleton className="h-3 w-1/5" />
      </div>
      <div className="flex-1 px-4 py-4 space-y-4 overflow-hidden">
        <div className="max-w-[60%]">
          <SkeletonText lines={2} />
        </div>
        <div className="max-w-[70%] ml-auto">
          <SkeletonText lines={3} />
        </div>
        <div className="max-w-[55%]">
          <SkeletonText lines={2} />
        </div>
      </div>
    </div>
  );
}
