import { Skeleton } from '@/components/ui/skeleton'

const ChatMessageSkeleton = () => {
  return (
    <div className="mt-8 space-y-8">
      {/* AI消息骨架屏 */}
      <div className="flex justify-start">
        <div className="bg-surface-element-dark-hover relative max-w-[496px] rounded-lg px-4 pt-6 pb-4 backdrop-blur-[32px]">
          <div className="space-y-2">
            <Skeleton className="h-5 w-[350px]" />
          </div>

          {/* 播放按钮骨架屏 */}
          <div className="bg-surface-float-normal absolute -top-3 left-0 flex items-center gap-2 rounded-l-sm rounded-tr-sm px-3 py-1">
            <Skeleton className="h-4 w-4" />
            <Skeleton className="h-4 w-6" />
          </div>
        </div>
      </div>

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

      {/* AI消息骨架屏 */}
      <div className="flex justify-start">
        <div className="bg-surface-element-dark-hover relative max-w-[496px] rounded-lg px-4 pt-6 pb-4 backdrop-blur-[32px]">
          <div className="space-y-2">
            <Skeleton className="h-5 w-[400px]" />
          </div>

          {/* 播放按钮骨架屏 */}
          <div className="bg-surface-float-normal absolute -top-3 left-0 flex items-center gap-2 rounded-l-sm rounded-tr-sm px-3 py-1">
            <Skeleton className="h-4 w-4" />
            <Skeleton className="h-4 w-6" />
          </div>
        </div>
      </div>

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

      <div className="flex justify-start">
        <div className="bg-surface-element-dark-hover relative max-w-[496px] rounded-lg px-4 pt-6 pb-4 backdrop-blur-[32px]">
          <div className="space-y-2">
            <Skeleton className="h-5 w-[350px]" />
          </div>

          {/* 播放按钮骨架屏 */}
          <div className="bg-surface-float-normal absolute -top-3 left-0 flex items-center gap-2 rounded-l-sm rounded-tr-sm px-3 py-1">
            <Skeleton className="h-4 w-4" />
            <Skeleton className="h-4 w-6" />
          </div>
        </div>
      </div>

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

      {/* AI消息骨架屏 */}
      <div className="flex justify-start">
        <div className="bg-surface-element-dark-hover relative max-w-[496px] rounded-lg px-4 pt-6 pb-4 backdrop-blur-[32px]">
          <div className="space-y-2">
            <Skeleton className="h-5 w-[400px]" />
          </div>

          {/* 播放按钮骨架屏 */}
          <div className="bg-surface-float-normal absolute -top-3 left-0 flex items-center gap-2 rounded-l-sm rounded-tr-sm px-3 py-1">
            <Skeleton className="h-4 w-4" />
            <Skeleton className="h-4 w-6" />
          </div>
        </div>
      </div>

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

      <div className="flex justify-start">
        <div className="bg-surface-element-dark-hover relative max-w-[496px] rounded-lg px-4 pt-6 pb-4 backdrop-blur-[32px]">
          <div className="space-y-2">
            <Skeleton className="h-5 w-[350px]" />
          </div>

          {/* 播放按钮骨架屏 */}
          <div className="bg-surface-float-normal absolute -top-3 left-0 flex items-center gap-2 rounded-l-sm rounded-tr-sm px-3 py-1">
            <Skeleton className="h-4 w-4" />
            <Skeleton className="h-4 w-6" />
          </div>
        </div>
      </div>

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

      {/* AI消息骨架屏 */}
      <div className="flex justify-start">
        <div className="bg-surface-element-dark-hover relative max-w-[496px] rounded-lg px-4 pt-6 pb-4 backdrop-blur-[32px]">
          <div className="space-y-2">
            <Skeleton className="h-5 w-[400px]" />
          </div>

          {/* 播放按钮骨架屏 */}
          <div className="bg-surface-float-normal absolute -top-3 left-0 flex items-center gap-2 rounded-l-sm rounded-tr-sm px-3 py-1">
            <Skeleton className="h-4 w-4" />
            <Skeleton className="h-4 w-6" />
          </div>
        </div>
      </div>

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

      {/* AI消息骨架屏 */}
      <div className="flex justify-start">
        <div className="bg-surface-element-dark-hover relative max-w-[496px] rounded-lg px-4 pt-6 pb-4 backdrop-blur-[32px]">
          <div className="space-y-2">
            <Skeleton className="h-5 w-[400px]" />
          </div>

          {/* 播放按钮骨架屏 */}
          <div className="bg-surface-float-normal absolute -top-3 left-0 flex items-center gap-2 rounded-l-sm rounded-tr-sm px-3 py-1">
            <Skeleton className="h-4 w-4" />
            <Skeleton className="h-4 w-6" />
          </div>
        </div>
      </div>

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

export default ChatMessageSkeleton
