'use client'

export function MessageSkeleton() {
  const MessageItem = ({ isMe }: { isMe: boolean }) => (
    <div className={`flex ${isMe ? 'justify-end' : 'justify-start'}`}>
      <div className="flex items-end space-x-2 max-w-xs sm:max-w-sm lg:max-w-md">
        {!isMe && (
          <div className="w-8 h-8 rounded-full bg-gray-200 dark:bg-gray-700 animate-pulse flex-shrink-0" />
        )}
        <div className="flex flex-col space-y-2">
          {!isMe && (
            <div className="h-3 bg-gray-200 dark:bg-gray-700 rounded w-20 animate-pulse" />
          )}
          <div
            className={`px-3 lg:px-4 py-2 lg:py-3 rounded-2xl animate-pulse ${
              isMe
                ? 'bg-teal-200 dark:bg-teal-900/30'
                : 'bg-gray-200 dark:bg-gray-700'
            }`}
          >
            <div className="space-y-2">
              <div className={`h-4 rounded ${isMe ? 'bg-teal-300 dark:bg-teal-800' : 'bg-gray-300 dark:bg-gray-600'} w-32`} />
              <div className={`h-4 rounded ${isMe ? 'bg-teal-300 dark:bg-teal-800' : 'bg-gray-300 dark:bg-gray-600'} w-24`} />
            </div>
            <div className={`h-3 rounded mt-2 ${isMe ? 'bg-teal-300 dark:bg-teal-800' : 'bg-gray-300 dark:bg-gray-600'} w-16`} />
          </div>
        </div>
      </div>
    </div>
  )

  return (
    <div className="space-y-3 lg:space-y-4">
      <MessageItem isMe={false} />
      <MessageItem isMe={true} />
      <MessageItem isMe={false} />
      <MessageItem isMe={true} />
      <MessageItem isMe={false} />
      <MessageItem isMe={true} />
    </div>
  )
}