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

const AssistantBlock: React.FC<{ widths: string[] }> = ({ widths }) => (
  <div className="flex gap-3">
    <Skeleton className="h-7 w-7 shrink-0 rounded-full" />
    <div className="min-w-0 flex-1 space-y-2.5 pt-1">
      {widths.map((width, index) => (
        <Skeleton key={index} className="h-3.5" style={{ width }} />
      ))}
    </div>
  </div>
);

/** Loading placeholder for a conversation's message history. */
const MessagesSkeleton: React.FC = () => (
  <div className="w-full space-y-8 py-4" aria-hidden="true">
    <div className="flex justify-end">
      <Skeleton className="h-10 w-1/2 rounded-2xl" />
    </div>
    <AssistantBlock widths={['92%', '88%', '70%']} />
    <div className="flex justify-end">
      <Skeleton className="h-9 w-1/3 rounded-2xl" />
    </div>
    <AssistantBlock widths={['85%', '95%', '60%', '78%']} />
  </div>
);

export default MessagesSkeleton;