'use client'

const StartChatItemSkeleton = () => {
  return (
    <div className="h-full min-w-0 flex-[0_0_100%] sm:flex-[0_0_calc(50%-12px)] md:flex-[0_0_calc(50%-16px)] lg:flex-[0_0_calc(33.333%-16px)] xl:flex-[0_0_calc(25%-18px)]">
      <div className="bg-surface-base-normal border-outline-normal relative animate-pulse overflow-hidden rounded-[20px] border border-solid">
        <div className="flex flex-col items-center p-6">
          {/* 头像骨架 */}
          <div className="bg-surface-element-normal mb-4 h-20 w-20 rounded-full" />

          {/* 名字骨架 */}
          <div className="bg-surface-element-normal mb-1 h-5 w-24 rounded" />

          {/* 点赞数骨架 */}
          <div className="bg-surface-element-normal mb-4 h-4 w-16 rounded" />

          {/* 对话建议骨架 */}
          <div className="w-full space-y-2">
            {[1, 2, 3].map((i) => (
              <div key={i} className="bg-surface-element-normal h-9 rounded-lg" />
            ))}
          </div>
        </div>
      </div>
    </div>
  )
}

const StartChatSkeleton = () => {
  return (
    <div className="flex gap-6">
      {/* 默认显示4个骨架屏 */}
      {[1, 2, 3, 4].map((i) => (
        <StartChatItemSkeleton key={i} />
      ))}
    </div>
  )
}

export default StartChatSkeleton
