const TelegramMessagesSkeleton = () => (
  <div className="flex flex-col gap-3 px-3 py-4">
    {[
      { side: 'in' as const, w: 200 },
      { side: 'out' as const, w: 240 },
      { side: 'in' as const, w: 120 },
      { side: 'out' as const, w: 180 },
      { side: 'in' as const, w: 220 },
    ].map((row, i) => (
      <div
        key={i}
        className={`flex ${row.side === 'out' ? 'justify-end' : 'justify-start'}`}
      >
        <div
          className="h-10 rounded-2xl bg-black/10 dark:bg-white/10 animate-pulse"
          style={{ width: row.w }}
        />
      </div>
    ))}
  </div>
);

export default TelegramMessagesSkeleton;
