import Empty from "@/components/ui/empty"

// 交易记录骨架屏组件
export const TransactionSkeleton = () => {
  return (
    <div className="flex items-center justify-between w-full animate-pulse">
      <div className="flex gap-3 items-center flex-1">
        <div className="flex flex-col items-start flex-1 gap-2">
          {/* 标题骨架 */}
          <div className="h-5 bg-surface-nest-normal rounded w-32"></div>
          {/* 日期骨架 */}
          <div className="h-4 bg-surface-nest-normal rounded w-40"></div>
        </div>
      </div>
      <div className="flex gap-2 items-center">
        {/* 钻石图标骨架 */}
        <div className="w-4 h-4 bg-surface-nest-normal rounded"></div>
        {/* 金额骨架 */}
        <div className="h-6 bg-surface-nest-normal rounded w-16"></div>
      </div>
    </div>
  )
}

// 空状态组件
export const TransactionEmptyState = () => {
  return (
    <div className="flex flex-col items-center justify-center text-center py-16">
      <Empty title="No transaction records" />
    </div>
  )
}
