import Link from 'next/link'
import { FaPencilAlt } from 'react-icons/fa'
import { FaLock, FaRegTrashCan } from 'react-icons/fa6'

import { useAuthStore } from '@/src/store/authStore'
import { verifyAccess } from '@/src/utils/accessControl'

interface Props {
  userId: string
  onChangePassword: (userId: string) => void
  onDelete: (userId: string) => void
}

export const ActionButtons = ({
  userId,
  onChangePassword,
  onDelete,
}: Props) => {
  const { user } = useAuthStore()

  const handleChangePassword = () => onChangePassword(userId)

  const handleDelete = () => onDelete(userId)

  return (
    <div className="flex space-x-3 justify-center">
      {user && user.role && (
        <>
          {verifyAccess(user.role, 'users') && (
            <>
              <button
                className="text-gray-600 hover:underline flex items-center space-x-1 text-nowrap"
                onClick={handleChangePassword}>
                <FaLock />
                <span>Cambiar contraseña</span>
              </button>
              <Link
                href={`/users/${userId}/modify`}
                className="text-blue-600 hover:underline flex items-center space-x-1">
                <FaPencilAlt />
                <span>Editar</span>
              </Link>

              {user.id !== userId && (

                <button
                  className="text-red-600 hover:underline flex items-center space-x-1"
                  onClick={handleDelete}>
                  <FaRegTrashCan />
                  <span>Eliminar</span>
                </button>
              )}
            </>
          )}
        </>
      )}
    </div>
  )
}