'use client'

import { IoCheckmarkOutline, IoReturnUpBackOutline, IoDocumentTextOutline } from 'react-icons/io5'

interface MessageActionsProps {
  onAccept: () => void
  onRevert: () => void
  onViewDiff?: () => void
  isAccepting?: boolean
  isReverting?: boolean
}

export default function MessageActions({
  onAccept,
  onRevert,
  onViewDiff,
  isAccepting = false,
  isReverting = false
}: MessageActionsProps) {
  return (
    <div className="mt-3 pt-2 border-t border-slate-600/50">
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-1.5 text-xs text-slate-400">
          <div className="w-1.5 h-1.5 bg-teal-400 rounded-full animate-pulse"></div>
          <span className="font-medium">AI changes pending</span>
        </div>
        
        <div className="flex items-center gap-1.5">
          {onViewDiff && (
            <button
              onClick={onViewDiff}
              disabled={isAccepting || isReverting}
              className="group relative overflow-hidden bg-slate-700/50 hover:bg-slate-700 border border-slate-600/50 hover:border-slate-600 text-slate-300 hover:text-slate-200 px-2.5 py-1.5 rounded-lg text-xs font-medium transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-1.5 hover:scale-[1.02] active:scale-[0.98]"
            >
              {/* Shimmer effect */}
              <div className="absolute inset-0 -translate-x-full group-hover:translate-x-full transition-transform duration-700 bg-gradient-to-r from-transparent via-white/5 to-transparent"></div>
              
              <IoDocumentTextOutline className="w-3 h-3" />
              <span>Open</span>
            </button>
          )}
          
          <button
            onClick={onAccept}
            disabled={isAccepting || isReverting}
            className="group relative overflow-hidden bg-teal-500/10 hover:bg-teal-500/20 border border-teal-500/20 hover:border-teal-500/40 text-teal-400 hover:text-teal-300 px-2.5 py-1.5 rounded-lg text-xs font-medium transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-1.5 hover:scale-[1.02] active:scale-[0.98]"
          >
            {/* Shimmer effect */}
            <div className="absolute inset-0 -translate-x-full group-hover:translate-x-full transition-transform duration-700 bg-gradient-to-r from-transparent via-white/5 to-transparent"></div>
            
            {isAccepting ? (
              <>
                <div className="w-3 h-3 border border-teal-400 border-t-transparent rounded-full animate-spin"></div>
                <span>Accepting...</span>
              </>
            ) : (
              <>
                <IoCheckmarkOutline className="w-3 h-3" />
                <span>Accept</span>
              </>
            )}
          </button>
          
          <button
            onClick={onRevert}
            disabled={isAccepting || isReverting}
            className="group relative overflow-hidden bg-red-500/10 hover:bg-red-500/20 border border-red-500/20 hover:border-red-500/40 text-red-400 hover:text-red-300 px-2.5 py-1.5 rounded-lg text-xs font-medium transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-1.5 hover:scale-[1.02] active:scale-[0.98]"
          >
            {/* Shimmer effect */}
            <div className="absolute inset-0 -translate-x-full group-hover:translate-x-full transition-transform duration-700 bg-gradient-to-r from-transparent via-white/5 to-transparent"></div>
            
            {isReverting ? (
              <>
                <div className="w-3 h-3 border border-red-400 border-t-transparent rounded-full animate-spin"></div>
                <span>Reverting...</span>
              </>
            ) : (
              <>
                <IoReturnUpBackOutline className="w-3 h-3" />
                <span>Revert</span>
              </>
            )}
          </button>
        </div>
      </div>
    </div>
  )
}