import React from 'react';
import { Skeleton } from '../ui';

const ROW_WIDTHS = ['85%', '70%', '92%', '60%', '78%'];

/** Loading placeholder for the conversation list — mirrors the grouped layout. */
const ConversationsSkeleton: React.FC = () => (
  <div className="px-2 pt-1" aria-hidden="true">
    {[0, 1].map((group) => (
      <div key={group} className={group > 0 ? 'mt-6' : ''}>
        <Skeleton className="mb-3 ml-2 h-2.5 w-16" />
        <div className="space-y-1">
          {ROW_WIDTHS.slice(0, group === 0 ? 5 : 3).map((width, index) => (
            <Skeleton key={index} className="h-8" style={{ width }} />
          ))}
        </div>
      </div>
    ))}
  </div>
);

export default ConversationsSkeleton;