const WhatsappMessagesSkeleton = () => (
  <div className="flex flex-col gap-2 px-3 py-3">
    {[
      { side: 'in' as const, w: 210 },
      { side: 'out' as const, w: 260 },
      { side: 'in' as const, w: 140 },
      { side: 'out' as const, w: 200 },
      { side: 'in' as const, w: 230 },
    ].map((row, i) => (
      <div
        key={i}
        className={`flex ${row.side === 'out' ? 'justify-end' : 'justify-start'}`}
      >
        <div
          className="h-9 rounded-md shadow-sm bg-black/[0.08] dark:bg-white/[0.12] animate-pulse"
          style={{ width: row.w, borderRadius: '7.5px' }}
        />
      </div>
    ))}
  </div>
);

export default WhatsappMessagesSkeleton;
