import React from 'react'

type ToastVariant = 'success' | 'error'

interface ToastBubbleProps {
  message: string
  variant?: ToastVariant
  topOffsetClass?: string // e.g. 'top-24'
  zIndexClass?: string // allow override when需要更高层级
}

export default function ToastBubble({
  message,
  variant = 'success',
  topOffsetClass = 'top-24',
  zIndexClass = 'z-[200]',
}: ToastBubbleProps) {
  return (
    <div className={`fixed ${topOffsetClass} inset-x-0 ${zIndexClass} flex justify-center pointer-events-none`}>
      <div
        className={`pointer-events-auto px-4 py-2 rounded-full shadow-lg border text-sm font-medium flex items-center gap-2 backdrop-blur-md ${
          variant === 'success'
            ? 'bg-emerald-500/95 border-emerald-400 text-white'
            : 'bg-rose-500/95 border-rose-400 text-white'
        }`}
      >
        {variant === 'success' ? (
          <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
          </svg>
        ) : (
          <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
          </svg>
        )}
        <span>{message}</span>
      </div>
    </div>
  )
}