import { Skeleton } from "@/components/ui/skeleton";

const ChatMessageSkeleton = () => {
  return (
    <div className="space-y-8 mt-8">
      {/* AI消息骨架屏 */}
      <div className="flex justify-start">
        <div className="backdrop-blur-[32px] bg-surface-element-dark-hover pt-6 pb-4 px-4 relative max-w-[496px] rounded-lg">
          <div className="space-y-2">
            <Skeleton className="h-5 w-[350px]" />
          </div>
          
          {/* 播放按钮骨架屏 */}
          <div className="bg-surface-float-normal py-1 px-3 rounded-l-sm rounded-tr-sm flex items-center gap-2 absolute left-0 -top-3">
            <Skeleton className="w-4 h-4" />
            <Skeleton className="h-4 w-6" />
          </div>
        </div>
      </div>

      {/* 用户消息骨架屏 */}
      <div className="flex justify-end items-center">
        <div className="backdrop-blur-[32px] bg-primary-normal/20 p-4 rounded-lg max-w-[496px]">
          <div className="space-y-2">
            <Skeleton className="h-5 w-[150px]" />
          </div>
        </div>
      </div>

      {/* AI消息骨架屏 */}
      <div className="flex justify-start">
        <div className="backdrop-blur-[32px] bg-surface-element-dark-hover pt-6 pb-4 px-4 relative max-w-[496px] rounded-lg">
          <div className="space-y-2">
            <Skeleton className="h-5 w-[400px]" />
          </div>
          
          {/* 播放按钮骨架屏 */}
          <div className="bg-surface-float-normal py-1 px-3 rounded-l-sm rounded-tr-sm flex items-center gap-2 absolute left-0 -top-3">
            <Skeleton className="w-4 h-4" />
            <Skeleton className="h-4 w-6" />
          </div>
        </div>
      </div>

      {/* 用户消息骨架屏 */}
      <div className="flex justify-end items-center">
        <div className="backdrop-blur-[32px] bg-primary-normal/20 p-4 rounded-lg max-w-[496px]">
          <div className="space-y-2">
            <Skeleton className="h-5 w-[300px]" />
          </div>
        </div>
      </div>

      <div className="flex justify-start">
        <div className="backdrop-blur-[32px] bg-surface-element-dark-hover pt-6 pb-4 px-4 relative max-w-[496px] rounded-lg">
          <div className="space-y-2">
            <Skeleton className="h-5 w-[350px]" />
          </div>
          
          {/* 播放按钮骨架屏 */}
          <div className="bg-surface-float-normal py-1 px-3 rounded-l-sm rounded-tr-sm flex items-center gap-2 absolute left-0 -top-3">
            <Skeleton className="w-4 h-4" />
            <Skeleton className="h-4 w-6" />
          </div>
        </div>
      </div>

      {/* 用户消息骨架屏 */}
      <div className="flex justify-end items-center">
        <div className="backdrop-blur-[32px] bg-primary-normal/20 p-4 rounded-lg max-w-[496px]">
          <div className="space-y-2">
            <Skeleton className="h-5 w-[150px]" />
          </div>
        </div>
      </div>

      {/* AI消息骨架屏 */}
      <div className="flex justify-start">
        <div className="backdrop-blur-[32px] bg-surface-element-dark-hover pt-6 pb-4 px-4 relative max-w-[496px] rounded-lg">
          <div className="space-y-2">
            <Skeleton className="h-5 w-[400px]" />
          </div>
          
          {/* 播放按钮骨架屏 */}
          <div className="bg-surface-float-normal py-1 px-3 rounded-l-sm rounded-tr-sm flex items-center gap-2 absolute left-0 -top-3">
            <Skeleton className="w-4 h-4" />
            <Skeleton className="h-4 w-6" />
          </div>
        </div>
      </div>

      {/* 用户消息骨架屏 */}
      <div className="flex justify-end items-center">
        <div className="backdrop-blur-[32px] bg-primary-normal/20 p-4 rounded-lg max-w-[496px]">
          <div className="space-y-2">
            <Skeleton className="h-5 w-[300px]" />
          </div>
        </div>
      </div>

      <div className="flex justify-start">
        <div className="backdrop-blur-[32px] bg-surface-element-dark-hover pt-6 pb-4 px-4 relative max-w-[496px] rounded-lg">
          <div className="space-y-2">
            <Skeleton className="h-5 w-[350px]" />
          </div>
          
          {/* 播放按钮骨架屏 */}
          <div className="bg-surface-float-normal py-1 px-3 rounded-l-sm rounded-tr-sm flex items-center gap-2 absolute left-0 -top-3">
            <Skeleton className="w-4 h-4" />
            <Skeleton className="h-4 w-6" />
          </div>
        </div>
      </div>

      {/* 用户消息骨架屏 */}
      <div className="flex justify-end items-center">
        <div className="backdrop-blur-[32px] bg-primary-normal/20 p-4 rounded-lg max-w-[496px]">
          <div className="space-y-2">
            <Skeleton className="h-5 w-[150px]" />
          </div>
        </div>
      </div>

      {/* AI消息骨架屏 */}
      <div className="flex justify-start">
        <div className="backdrop-blur-[32px] bg-surface-element-dark-hover pt-6 pb-4 px-4 relative max-w-[496px] rounded-lg">
          <div className="space-y-2">
            <Skeleton className="h-5 w-[400px]" />
          </div>
          
          {/* 播放按钮骨架屏 */}
          <div className="bg-surface-float-normal py-1 px-3 rounded-l-sm rounded-tr-sm flex items-center gap-2 absolute left-0 -top-3">
            <Skeleton className="w-4 h-4" />
            <Skeleton className="h-4 w-6" />
          </div>
        </div>
      </div>

      {/* 用户消息骨架屏 */}
      <div className="flex justify-end items-center">
        <div className="backdrop-blur-[32px] bg-primary-normal/20 p-4 rounded-lg max-w-[496px]">
          <div className="space-y-2">
            <Skeleton className="h-5 w-[300px]" />
          </div>
        </div>
      </div>

      {/* AI消息骨架屏 */}
      <div className="flex justify-start">
        <div className="backdrop-blur-[32px] bg-surface-element-dark-hover pt-6 pb-4 px-4 relative max-w-[496px] rounded-lg">
          <div className="space-y-2">
            <Skeleton className="h-5 w-[400px]" />
          </div>
          
          {/* 播放按钮骨架屏 */}
          <div className="bg-surface-float-normal py-1 px-3 rounded-l-sm rounded-tr-sm flex items-center gap-2 absolute left-0 -top-3">
            <Skeleton className="w-4 h-4" />
            <Skeleton className="h-4 w-6" />
          </div>
        </div>
      </div>

      {/* 用户消息骨架屏 */}
      <div className="flex justify-end items-center">
        <div className="backdrop-blur-[32px] bg-primary-normal/20 p-4 rounded-lg max-w-[496px]">
          <div className="space-y-2">
            <Skeleton className="h-5 w-[300px]" />
          </div>
        </div>
      </div>
    </div>
  );
};

export default ChatMessageSkeleton;
