import { Skeleton } from '#/components/atoms/skeleton.jsx';
import { cn } from '#/lib/utils.js';

/**
 * A plain ListRow's geometry as placeholders: the media square, the title bar,
 * an optional second line, and an optional trailing bar. Each width prop takes
 * a Tailwind width class, so a list of rows can vary its widths and read as
 * text rather than as a block.
 */
export function SkeletonRow({
  media = 'size-4 rounded-md',
  title = 'w-40',
  description,
  action,
}) {
  return (
    <div className="flex w-full items-center gap-4 px-1 py-3">
      <Skeleton className={media} />
      <div className="flex min-w-0 flex-1 flex-col gap-2">
        <Skeleton className={cn('h-3.5 max-w-full rounded-md', title)} />
        {description && (
          <Skeleton className={cn('h-3 max-w-full rounded-md', description)} />
        )}
      </div>
      {action && <Skeleton className={cn('h-3 shrink-0 rounded-md', action)} />}
    </div>
  );
}