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

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

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