const InstagramMessagesSkeleton = () => (
  <div className="flex flex-col gap-3 px-3 py-4">
    {[
      { side: 'in' as const, w: 220 },
      { side: 'out' as const, w: 200 },
      { side: 'in' as const, w: 160 },
      { side: 'out' as const, w: 260 },
      { side: 'in' as const, w: 240 },
    ].map((row, i) => (
      <div
        key={i}
        className={`flex ${row.side === 'out' ? 'justify-end' : 'justify-start'}`}
      >
        <div
          className={
            row.side === 'out'
              ? 'h-10 rounded-[22px] animate-pulse bg-gradient-to-r from-amber-300/55 via-pink-400/50 to-violet-500/45 dark:from-violet-950/80 dark:via-fuchsia-900/70 dark:to-pink-900/65 shadow-[0_2px_10px_rgba(0,0,0,0.08)]'
              : 'h-10 rounded-[22px] animate-pulse border border-black/[0.06] dark:border-white/[0.08] bg-[var(--tg-bg)]/70 backdrop-blur-[1px] shadow-[0_1px_6px_rgba(0,0,0,0.05)]'
          }
          style={{ width: row.w }}
        />
      </div>
    ))}
  </div>
);

export default InstagramMessagesSkeleton;
